amp-iframe

1.0 0.1

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

Bir iframe görüntüler.

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:

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

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.