Google AMP - Iframes
Google amp-iframeest utilisé pour afficher les iframes sur la page. Il y a des conditions à ajouter à amp-iframe et nous ne pouvons donc pas utiliser les iframes normaux sur la page. Ce chapitre en explique plus à ce sujet.
Conditions à suivre pour les iFrames
Les conditions à respecter lors de l'utilisation d'iframe dans les pages AMP sont les suivantes -
L'URL utilisée sur une iframe doit être une requête https ou un URI de données ou utiliser l' attribut srcdoc .
amp-iframe par défaut aura un attribut sandbox ajouté. L'attribut sandbox sera défini sur vide. Une valeur vide dans sandbox signifie que l'iframe estmaximum sandboxed(restriction supplémentaire sur iframe). Nous pouvons ajouter des valeurs au bac à sable qui en discuteront à l'aide d'un exemple ci-dessous.
Un amp-iframe ne peut pas être affiché en haut de la page, il doit être à près de 600 pixels du haut ou dans les premiers 75% de la fenêtre lors du défilement vers le haut. Dans le cas où vous devez afficher l'iframe au début, vous devez ajouter un espace réservé à l'iframe dont nous discuterons à l'aide d'exemples plus loin dans le didacticiel.
amp-iframe ne doit pas avoir la même origine que le conteneur. Par exemple, si votre site principal est sur www.xyz.com, vous ne pouvez pas avoir iframe src commewww.xyz.com/urlname. Il peut en prendre d'autres tels que.xyz.com, example.xyz.com etc.
Pour travailler avec des iframes, nous devons ajouter le script suivant -
<script async custom-element = "amp-iframe"
src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>Le format Amp-iframe est le suivant -
<amp-iframe width = "600" title = "Google map"
height = "400" layout = "responsive"
sandbox = "allow-scripts allow-same-origin allow-popups"
frameborder = "0"
src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">
</amp-iframe>Comprenons cela à l'aide d'un exemple de travail où utilisera iframe pour afficher les cartes Google comme indiqué ci-dessous.
Exemple
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Iframe</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:-amp-start 8s steps(1,end) 0s
1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style><noscript>
<style amp-boilerplate>
body{-webkit-animation:none;-moz-animation:
none;-ms-animation:none;animation:none}
</style></noscript>
<script async custom-element = "amp-iframe"
src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
></script>
<style>
div {
height:850px;
text-align:center;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Iframe</h3>
<div>
Google Maps in Iframe
</div>
<h3>Google AMP - Amp Iframe</h3>
<amp-iframe width = "600"
title = "Google map"
height = "400"
layout = "responsive"
sandbox = "allow-scripts allow-same-origin allow-popups"
frameborder = "0" src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">
</amp-iframe>
</body>
</html>Production
Notez que nous avons placé l'iframe à plus de 600 pixels du haut. Cela donne une erreur comme indiqué ci-dessous -
Dans l'exemple ci-dessus, nous avons utilisé sandbox avec des valeurs comme ci-dessous -
sandbox = "allow-scripts allow-same-origin allow-popups"L'attribut Sandbox agit comme une autorisation sur le contenu à charger dans l'iframe. Ici, nous autorisons le chargement de tous les scripts provenant des liens Google Maps. Dans le cas où nous ne donnons pas d'attribut sandbox, c'est l'erreur affichée qui bloque le contenu à charger dans l'iframe -
Notez que nous devons donner la bonne autorisation au bac à sable. Vous pouvez trouver le détail de toutes les autorisations à donner à sandbox ici -https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox.
Nous pouvons utiliser l'attribut d'espace réservé dans un amp-iframe pour se débarrasser de la condition de plus de 600 pixels.
Un exemple de travail pour le même est donné ci-dessous -
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Iframe</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width, minimum-scale=1,initial-scale=1">
<style amp-boilerplate>
body{
-webkit-animation:-amp-start 8s steps(1,end) 0s
1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-iframe"
src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>
<style>
div {
height:850px;
text-align:center;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Iframe</h3>
<amp-iframe width = "600"
title = "Google map"
height = "400"
layout = "responsive"
sandbox = "allow-scripts allow-same-origin allow-popups"
frameborder = "0"
src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">
<amp-img layout = "fill" src = "images/loading.jpg" placeholder></amp-img>
</amp-iframe>
</body>
</html>Nous avons utilisé amp-img comme espace réservé comme suit -
<amp-iframe width = "600"
title = "Google map"
height = "400"
layout = "responsive"
sandbox = "allow-scripts allow-same-origin allow-popups"
frameborder = "0"
src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie = UTF8&iwloc = &output = embed">
<amp-img layout = "fill" src = "images/loading.jpg" placeholder></amp-img>
</amp-iframe>Dans ce cas, la restriction de 600px et amp-iframe dans la fenêtre d'affichage à 75% n'est pas prise en compte. Un indicateur de chargement (trois points) est affiché sur l'image est utilisé comme espace réservé, qui est essentiellement pour le src amp-iframe. Une fois le contenu de l'iframe chargé, l'image est supprimée et le contenu de l'iframe est affiché comme affiché dans la sortie ci-dessous -
Production
