AMP

amp-iframe

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

Bir iframe görüntüler.

 

Required Scripts

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Bir iframe görüntüler.

Zorunlu Komut Dosyası <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Desteklenen Düzenler fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive
Örnekler amp-iframe için ek açıklamalı kod örneği

Davranış

amp-iframe öğesinin, vanilla iframe'e göre kendisini daha güvenli hale getirmek ve tek bir iframe tarafından yönetilen AMP dosyalarından kaçınmak için tasarlanmış bazı önemli farklılıkları vardır:

  • amp-iframe, (aşağıda açıklandığı gibi placeholder öğesini kullanan iframe'ler haricinde) dokümanın üst kısmına yakın görünmeyebilir. iframe en üst kısımdan 600 piksel uzaklıkta olmalı veya üst kısma kaydırıldığında, görüntü alanının ilk %75'inde yer almamalıdır (hangisi daha küçükse).
  • Varsayılan olarak, bir amp-iframe korumalı alanda yer alır (ayrıntılara bakın).
  • Bir amp-iframe, kaynakları yalnızca HTTPS aracılığıyla, bir veri URI'sından veya srcdoc özelliği ile istemelidir.
  • sandbox özelliğinde allow-same-origin değerine izin verilmedikçe, amp-iframe öğesi, kapsayıcıyla aynı kaynakta olmamalıdır. iframe'ler için izin verilen kaynaklarla ilgili daha fazla ayrıntı için "iframe kaynak politikası" dokümanına bakın.

Örnek: Bir amp-iframe içine yerleştirilmiş Google Haritası

<amp-iframe width="200" height="100"
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    frameborder="0"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=iceland">
  </amp-iframe>

Şu şekilde oluşturulur:

Daha fazla amp-iframe demosu için Örneklerle AMP sitesini ziyaret edin.

amp-iframe öğesinin reklamcılık için kullanımı

amp-iframe, reklam görüntülemenin birincil amacı için kullanılmamalıdır. amp-iframe, reklamların bir parçası olan videoların görüntülenmesi amacıyla kullanılabilir. Bu AMP politikası, ilgili iframe'lerin oluşturulmamasıyla uygulanabilir.

Reklamcılık kullanım alanları, bunun yerine amp-ad öğesini kullanmalıdır.

Bu politikanın gerekçileri şunlardır:

  • amp-iframe korumalı alanı uygular ve korumalı alan, alt iframe'lere de uygulanır. Bu, reklamın kendisi çalışıyor görünse bile açılış sayfalarının bozuk olabileceği anlamına gelir.
  • amp-iframe, yapılandırmayı iframe'e geçirecek herhangi bir mekanizma sağlamaz.
  • amp-iframe, iframe tarafından tam olarak kontrol edilen yeniden boyutlandırma mekanizmasına sahip değildir.
  • Görüntülenebilirlik bilgileri amp-iframe tarafından kullanılamaz.

Özellikler

src src özelliği, bir istisna dışında genellikle standart bir iframe'de olduğu gibi davranır: Kaynak dokümanların AMP bağlamı içine yerleştirildiğini bilmesi için URL'ye #amp=1 parçası eklenir. Bu parça, yalnızca src tarafından belirtilen URL'nin halihazırda bir parçasının olmadığı durumlarda eklenir.
srcdoc, frameborder, allowfullscreen, allowpaymentrequest, allowtransparency, referrerpolicy Bu özelliklerin tamamı standart iframe'lerde olduğu gibi davranmalıdır.
frameborder belirtilmezse varsayılan olarak 0 değerine ayarlanır.
sandbox amp-iframe tarafından oluşturulan iframe'lerde sandbox özelliği her zaman tanımlı olur. Varsayılan olarak değer boştur; diğer bir deyişle, "maksimum korumalı alan uygulanmış"tır. " sandbox değerlerini ayarlayarak iframe'e daha az korumalı alan uygulanmasını sağlayabilirsiniz. Tarayıcılar tarafından desteklenen tüm değerlere izin verilir. Örneğin sandbox="allow-scripts" değerinin ayarlanması, iframe'in JavaScript'i çalıştırmasına veya sandbox="allow-scripts allow-same-origin" değeri, iframe'in JavaScript çalıştırmasına, CORS olmayan XHR'ler yapmasına ve çerezleri okumasına/yazmasına olanak tanır.

Özel olarak korumalı alan oluşturma düşünülerek oluşturulmamış bir dokümanı iframe içine yerleştiriyorsanız büyük olasılıkla sandbox özelliğine allow-scripts allow-same-origin değerini eklemeniz gerekir ve ek özelliklere izin vermeniz gerekebilir.

Korumalı alanın, korumalı alandaki bir iframe'den açılan tüm pencerelere uygulandığını da unutmayın. Bu, target=_blank içeren bir bağlantı tarafından oluşturulan yeni pencereleri de içerir (bunun olmasına izin vermek için allow-popups özelliğini ekleyin). sandbox özelliğine allow-popups-to-escape-sandbox eklenmesi, bu yeni pencerelerin korumalı alanda olmayan yeni pencereler gibi davranmasını sağlar. Bu, büyük olasılıkla istediğiniz ve beklediğiniz durumdur. Ne yazık ki, bu yazı hazırlandığı sırada, allow-popups-to-escape-sandbox yalnızca Chrome tarafından destekleniyordu.

Korumalı alan özelliği hakkında daha ayrıntılı bilgi için MDN'deki dokümanlara bakın.
common attributes Bu öğe, AMP bileşenlerine genişletilmiş ortak özellikleri içerir.

Yer tutucu içeren iframe

amp-iframe, aşağıdaki örnekte gösterildiği gibi bir placeholder öğesi içerdiğinde, amp-iframe öğesinin dokümanın üst kısmında görünmesi mümkündür.

  • amp-iframe, iframe görüntülenmeye hazır olana kadar bir yer tutucu olarak oluşturulacak placeholder özelliğine sahip bir öğe (örneğin, bir amp-img öğesi) içermelidir.
  • iframe'in hazır olması, iframe'in onload özelliği veya iframe dokümanı tarafından gönderilecek bir embed-ready postMessage dinlenerek (hangisi önce gelirse) bilinebilir.

Örnek: Bir yer tutucu içeren iframe

<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>

Örnek: iframe yerleştirme özellikli istek

window.parent.postMessage({
  sentinel: 'amp',
  type: 'embed-ready'
  }, '*');

iframe'i yeniden boyutlandırma

amp-iframe öğesinin, diğer AMP öğelerinde olduğu gibi tanımlı statik bir düzeni olmalıdır. Bununla birlikte, çalışma zamanında bir amp-iframe öğesini yeniden boyutlandırmak mümkündür. Bunu yapmak için:

  1. amp-iframe , resizable özelliğiyle tanımlanmalıdır.
  2. amp-iframe, bir overflow alt öğesine sahip olmalıdır.
  3. amp-iframe, allow-same-origin korumalı alan özelliğini ayarlamalıdır.
  4. Iframe dokümanı, embed-size isteğini bir pencere mesajı olarak göndermelidir.
  5. İstek yüksekliği belirli bir eşikten azsa (100px) embed-size isteği reddedilir.

resizable değerinin, scrolling öğesinin no değerini geçersiz kıldığını unutmayın.

Örnek: overflow öğesine sahip amp-iframe

<amp-iframe width=300 height=300
    layout="responsive"
    sandbox="allow-scripts allow-same-origin"
    resizable
    src="https://foo.com/iframe">
    <div overflow tabindex=0 role=button aria-label="Read more">Read more!</div>
</amp-iframe>

Örnek: iframe yeniden boyutlandırma isteği

window.parent.postMessage({
  sentinel: 'amp',
  type: 'embed-size',
  height: document.body.scrollHeight
  }, '*');

Bu mesaj alındıktan sonra AMP çalışma zamanı, isteği olabildiğince erken yerine getirmeye çalışır ancak okuyucunun şu anda okumakta olduğu yeri, kaydırmanın devam edip etmediğini ve diğer herhangi kullanıcı deneyimlerini ya da performans faktörlerini göz önünde bulundurur. Çalışma zamanı yeniden boyutlandırma isteğini karşılayamazsa amp-iframe bir overflow öğesi gösterir. overflow öğesinin tıklanması, bir kullanıcı işlemi tarafından tetiklendiğinden amp-iframe öğesini hemen yeniden boyutlandırır.

Yeniden boyutlandırmanın ne kadar hızlı yürütüleceğini etkileyen bazı faktörleri burada görebilirsiniz:

  • Yeniden boyutlandırmanın kullanıcı işlemi tarafından tetiklenip tetiklenmediği.
  • Yeniden boyutlandırmanın şu anda etkin olan bir iframe için istenip istenmediği.
  • Yeniden boyutlandırmanın görüntü alanının altında veya üstünde bulunan bir iframe için istenip istenmediği.

iframe görüntülenebilirliği

iframe'ler, iframe'in üst görüntü alanıyla kesişiminin IntersectionObserver stil değişiklik kayıtlarını almaya başlaması için üst öğelerine bir send-intersections mesajı gönderebilir.

Not: Aşağıdaki örneklerde, komut dosyasının oluşturulan iframe'de içinde yer aldığı ve window.parent öğesinin üst pencere olduğu kabul edilmektedir. Komut dosyası iç içe yerleştirilmiş bir iframe'deyse window.parent öğesini üstteki AMP penceresi olarak değiştirin.

Örnek: iframe send-intersections isteği

window.parent.postMessage({
  sentinel: 'amp',
  type: 'send-intersections'
  }, '*');

Iframe, kesişim verilerini almak için üst pencereden gelen bir intersection mesajını dinleyebilir.

Örnek: iframe send-intersections isteği

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);
  });
});

Kesişim mesajı, iframe kaydırıldığında veya yeniden boyutlandırıldığında görüntü alanının içine veya dışına taşındığında (veya kısmen göründüğünde) iframe'e üst öğe tarafından gönderilir.

İzleme/analiz iframe'leri

Analiz yapmayı amaçladığınızda amp-analytics öğesini kullanmanızı önemle tavsiye ederiz. Bu öğe, çok çeşitli analiz tedarikçi firması için yapılandırılabilen çok daha güçlü, eksiksiz ve etkili bir çözümdür.

AMP, her sayfada analiz ve izleme amacıyla yalnızca tek bir iframe'in kullanılmasına izin verir. Kaynaklardan tasarruf etmek için bu iframe'ler yüklendikten 5 saniye sonra DOM'dan kaldırılır. Bu süre, yapılması gereken işlerin tamamlanması için yeterli bir zamandır.

iframe'ler, görünmez veya küçük olmaları gibi kullanıcıya yönelik doğrudan bir amaca hizmet etmiyorlarsa izleme/analiz iframe'leri olarak tanımlanır.

Yönerge: amp-iframe üzerinde mevcut AMP bileşenlerini kullanma

Gerekli kullanıcı deneyimi AMP'deki diğer araçlarla mümkün değilse yani kullanım alanı için halihazırda mevcut bir AMP bileşeni yoksa amp-iframe bileşeni, bir yedek olarak kabul edilmelidir. Bunun nedeni, belirli bir kullanım alanı için uyarlanmış bir AMP bileşenini kullanmanın birçok yararının olmasıdır. Örneğin:

  • Daha iyi kaynak yönetimi ve performans
  • Özel bileşenler, bazı durumlarda yerleşik yer tutucu resimler sağlayabilir. Bu, örneğin video yüklenmeden önce doğru video küçük resminin alınması anlamına gelir ve manuel olarak yer tutucu eklemek için yapılan kodlama çalışmasını azaltır.
  • Yerleşik yeniden boyutlandırma. Bu, öngörülemeyen boyuta sahip iframe içeriğinin kullanıcıya, kaydırılabilir bir çerçeve yerine sayfanın kendi içindeymiş gibi görünebileceği anlamına gelir
  • Başka ek özellikler de oluşturulabilir (örneğin, video oynatıcılar için otomatik oynatma)

Doğrulama

AMP doğrulayıcı spesifikasyonunda amp-iframe kurallarına bakın.

Daha fazla yardıma mı ihtiyacınız var?

Bu belgeyi defalarca okudunuz ama tüm sorularınıza tatmin edici bir yanıt bulamadınız mı? Belki başka kişiler de bu şekilde hissetmiştir: Stack Overflow'dan onlara ulaşın.

Stack Overflow'a git
Bir hata veya eksik bir özellik mi buldunuz?

AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.

GitHub'a git