Mengakali Pemasangan Iframe Agar Valid HTML5

Ditulis oleh: Adhy Suryadi

Ditulis pada: 5/11/2015

Sudah lama diketahui bahwa iframe tidak valid html5. Penyebabnya adalah atribut yang terdapat pada iframe seperti atribut untuk scroll, frame border, full screen, dan lainnya. Widget yang biasa menggunakan iframe ini biasanya untuk video player atau untuk iklan. Tentunya hal ini membuat dilema bagi Blogger ketika akan memasangkan video atau iklan di blog. Sementara jika kita memasang iklan dengan menggunakan script js maka otomatis akan terdetek blocking-render js di pagespeed insights.

Contoh iframe dengan beberapa atribut yang error pada validasi html5 seperti berikut ini.

<iframe src="http://blablabla.com/banner.php?section=General&amp;ga=g" frameborder="0" scrolling="no" width="300" height="250" marginwidth="0" marginheight="0"></iframe>

Dan error pada validasi html5 untuk iframe di atas seperti di bawah ini.

Dari 1 buah iframe saja sudah menyumbangkan 4 buah error, sudah dapat dihitung error yang akan muncul jika kita memasang banyak iframe (video atau iklan).

Nah kini saya akan share sebuah trik untuk mengakali pemasangan iframe agar tidak menyebabkan error pada validasi html5.

Triknya adalah pemasangannya menggunakan javascript document.write, dengan begitu iframenya tidak akan terdetek sehingga tidak akan error pada validasi html5.

Silahkan gunakan javascript di bawah ini untuk memasang iframe di blog

<script type="text/javascript">

//<![CDATA[

document.write('iframe di sini');

//]]>

</script>

Sehingga penampakannya dengan iframe menjadi seperti di bawah ini

<script type="text/javascript">

//<![CDATA[

document.write('<iframe src="http://blablabla.com/banner.php?section=General&amp;ga=g" frameborder="0" scrolling="no" width="300" height="250" marginwidth="0" marginheight="0"></iframe>');

//]]>

</script>

Mudah bukan? Sekarang coba cek halaman blog Anda untuk memastikan bahwa error validasi html5 dari iframe-nya sudah hilang. Dengan ini kita bebas memasang iklan tanpa error validasi html5 dan tidak akan terdetek blocking render js karena tidak menggunakan script js.

Untuk memasang iframe video Youtube (responsive) dengan javascript seperti ini silahkan simak di sini.