Skip to content

Get Artikel

Get Artikel You Need And Usefull

Menu
  • Beranda
  • Tech
  • Sitemap
  • Privacy Police
  • Disclamer
Menu
AMP iframe script 0.1

AMP iframe script 0.1

Posted on April 15, 2022April 15, 2022 by Erika
Daftar Isi Sembunyikan
1 AMP iframe script
1.1 iframe dengan placeholder
1.2 Ukuran pengubahan iframe
1.3 Visibilitas iframe
1.4 Terkait

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.

AMP iframe script 0.1
getartikel.com

Terkait

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Recent Posts

  • AMP iframe script 0.1
  • 6 Tips Kunci Membuat Artikel Yang Baik dan Berkulitas
  • 2 Cara Membuat Daftar Isi HTML
  • Cara Menambahkan HYPER LINK di HTML
  • Seri Dunia 2021: Langkah melihat Astros versus. Braves Games 6 di Fox
  • http://storehpseken.getartikel.com/
  • http://resep.getartikel.com/
  • http://tech.getartikel.com/
© 2022 Get Artikel | Powered by Minimalist Blog WordPress Theme