getartikel.com – AMP merupakan salah satu bagian penting dalam pembuatan website saat ini. Karna ini juga mempengaruhi kecepatan loading sebuah website makin cepat web loading maka makin terbukan untuk berada di Page 1 Search Google. Berikut yang di butuh kan taruh diantara <head> </head>.
AMP iframe script
Scripts Request AMP
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>Bagi kalian yang ingin memakai iframe tentu di butuh kan lah script di atas jika tidak disematkan maka iframe kalian tidak akan muncul, Setelah kalian sematkan amp script di atas barulah akan muncul amp iframe kalian. AMP iframe script
Tata letak yang didukung
- fill
- fixed
- fixed-height
- flex-item
- intrinsic
- nodisplay
- responsive
amp-iframe memiliki bebrapa perbedaan penting dibandingkan iframe vanila yang di rancang untuk menjadikan lebih aman dan menghindari file AMP yang di dominasi oleh ifram tunggal.
- amp-iframe tidak akan muncul di dekat bagian atas dokumen ( kecuali untuk iframe yang menggunakan placeholder. iframe harus berjarak 600px dari atas atau tidak dalam 75% pertama dari viewpoint saat di scroll ke atas, salam satu yang lebih kecil.
- secara default, amp-iframe di tempatkan dalam sandbox
- amp-iframe hanya boleh meminta resource melalui HTTPS, dari data- URL, atau melalui atribut srcdoc
- amp-iframe tidak boleh berada dalam asal yang sama dengan container kecuali jika allow-same-origin tidak diizinkan dalam atribut sandbox
Baca juga : Script Anti Copy Paste ( Copas ), Script Site Map
iframe dengan placeholder
AMP iframe script anda dapat menampilkan amp-iframe di bagian atas dokumen jika amp-iframe memiliki elemen placeholder, seperti di bawah ini.
- amp-iframe harus memuat elemen dengan atribut placeholder, ( misal dengan elemen amp-img ) yang akan di render sebagai placeholder sampai iframe siap di tampilkan.
- Kesiapan iframe dapat diketahui dengan mendeteksi onload iframe atau embed-ready postMessage. yang akan di kirim oleh dokumen iframen, salah satunya yang terjadi lebih dulu.
contoh iframe dengan placeholder
<amp-iframe width=300 height=300
layout="responsive"
sandbox="allow-scripts allow-same-origin"
src="https://foo.com/iframe"
<amp-img layout="fill" src="https://foo.com/foo.png" placeholder></amp-img>
</amp-iframe>
contoh permintaan iframe siap disematkan
window.parent.postMessage({
sentinel: 'amp',
type: 'embed-ready'
}, '*');
Ukuran pengubahan iframe
amp-iframe harus menggunakan tata letak statis seperti halnya elemen AMP lainnya. Namun, anda dapat mengubah ukuran amp-iframe saat runtime.
- amp-iframe harus ditetapkan dengan atribut resizeble
- amp-iframe harus memiliki elemen overflow
- amp-iframe harus menetapakan atribut sandbox allow-same-origin
- Domuken iframe harus mengirimkan permintaan embed-size sebagai pesan jendela.
- Permintaan embed-size akan di tolak jika tinggi permintaan kurang dari ambang batas tertentu ( 100 pixel ).
Visibilitas iframe
iAMP iframe script dapat mengirim pesan sand-intersections kepada induknya agar melalui menerima catatan perubahan gaya intersectionObserver untuk intersection iframe dengan viewpoint induk.
catatan : Dalam contoh berikut, kami menganggapi skrip berada dalam iframe yang dibuat, dengan window.parent menjadi jendela paling atas, jika skrip berada di iframe bertingkat, ubah window.parent ke jendela AMP peling atas.
contoh permintaan sandintersections iframe
window.parent.postMessage({
sentinel: 'amp',
type: 'send-intersections'
}, '*');
iframe dapat mendeteksi pesan intersections dari jendela induk untuk menerima data intersection.
contoh : permintaan sand-intersections iframe
window.addEventListener('message', function(event) {
if (event.source != window.parent ||
event.origin == window.location.origin ||
!event.data ||
event.data.sentinel != 'amp' ||
event.data.type != 'intersection') {
return;
}
event.data.changes.forEach(function (change) {
console.log(change);
});
});
AMP iframe script – Pesan intersection akan dikirim oleh induk ke iframe saat iframe bergerak masuk atau keluar dari viewpoint ( atau terlihat sebagian ) ketika iframe di-scroll atau diubah ukurannya.
