آموزش Iframes در گوگل AMP

4 سال پیش

امتیاز دهید post

آموزش Iframes در گوگل AMP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش Iframes در گوگل AMP خواهیم پرداخت.

از Google amp-iframe برای نمایش iframes در صفحه استفاده می شود. شرایطی وجود دارد که باید به amp-iframe اضافه شوند و بنابراین نمی توانیم از iframes های معمولی صفحه استفاده کنیم. در این فصل بیشتر در این مورد بحث می شود.

شرایطی که برای iFrames دنبال می شود

شرایطی که باید هنگام استفاده از iframe در صفحات AMP رعایت شود به شرح زیر است –

آدرس اینترنتی مورد استفاده در iframe باید درخواست https یا data-URI یا با استفاده از ویژگی srcdoc باشد.
به طور پیش فرض amp-iframe ویژگی sandbox به آن اضافه خواهد شد. ویژگی sandbox روی خالی تنظیم خواهد شد. مقدار خالی برای sandbox به این معنی است که iframe حداکثر جعبه sandbox است (محدودیت اضافی برای iframe). ما می توانیم مقادیری را به جعبه ماسه اضافه کنیم که با کمک مثال زیر بحث خواهد شد.
یک amp-iframe نمی تواند در بالای صفحه نمایش داده شود ، هنگامی که از بالای صفحه پیمایش می شود باید تقریباً 600 پیکسل از بالا یا در 75٪ اول دیدگاه فاصله داشته باشد. در صورتی که در ابتدا باید iframe را نمایش دهید ، باید مکان یابی را به iframe اضافه کنید که در ادامه با کمک مثالهایی در مورد آن بحث خواهیم کرد.
amp-iframe نباید منشأ یکسانی با ظرف داشته باشد. به عنوان مثال ، اگر سایت اصلی شما در سایت www.xyz.com باشد ، نمی توانید iframe src را به عنوان www.xyz.com/urlname داشته باشید. این می تواند موارد دیگری مانند.xyz.com ، example.xyz.com و غیره را بگیرد.

برای کار با iframes، باید اسکریپت زیر را اضافه کنیم –

&lt;script async custom-element = "amp-iframe" 
   src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"&gt;&lt;/script&gt;

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

قالب amp-iframe به شرح زیر است –

&lt;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&amp;t=&amp;z=13&amp;ie=UTF8&amp;iwloc=&amp;output=embed"&gt;
&lt;/amp-iframe&gt;

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

بگذارید ما این موضوع را با کمک یک مثال مفید درک کنیم که در آن iframe برای نمایش نقشه های Google به شرح زیر استفاده می شود.

مثال

&lt;!doctype html&gt;
&lt;html amp lang = "en"&gt;
   &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;script async src = "https://cdn.ampproject.org/v0.js"&gt;&lt;/script&gt;
      &lt;title&gt;Google AMP - Amp Iframe&lt;/title&gt;
      &lt;link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"&gt;
      &lt;meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1"&gt;

      &lt;style amp-boilerplate&gt;
         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}}
      &lt;/style&gt;&lt;noscript&gt;
      &lt;style amp-boilerplate&gt;
         body{-webkit-animation:none;-moz-animation:
         none;-ms-animation:none;animation:none}
      &lt;/style&gt;&lt;/noscript&gt;

      &lt;script async custom-element = "amp-iframe" 
         src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
      &gt;&lt;/script&gt;
      
      &lt;style&gt;
         div {
            height:850px;
            text-align:center;
         }
      &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h3&gt;Google AMP - Amp Iframe&lt;/h3&gt;
      &lt;div&gt;
         Google Maps in Iframe
      &lt;/div&gt;
      &lt;h3&gt;Google AMP - Amp Iframe&lt;/h3&gt;
      &lt;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&amp;t=&amp;z=13&amp;ie=UTF8&amp;iwloc=&amp;output=embed"&gt;
      &lt;/amp-iframe&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>Google AMP - Amp Iframe</title>

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>

body{-webkit-animation:none;-moz-animation:

none;-ms-animation:none;animation:none}

</style></noscript>

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>

خروجی

مشاهده کنید که ما iframe را با سرعت بیش از 600 پیکسل از بالا قرار داده ایم. همانطور که در زیر نشان داده شده خطایی ایجاد می کند –

Google placed Iframe
در مثال بالا، ما از sandbox با مقادیری که در زیر آورده شده استفاده کرده ایم –

sandbox = “پنجره های مجاز-اجازه-اجازه-همان-منشا”

sandbox = "allow-scripts allow-same-origin allow-popups"

1	sandbox = "allow-scripts allow-same-origin allow-popups"

ویژگی Sandbox مانند مجوز داری است که باید در iframe بارگیری شود. در اینجا ما اجازه می دهیم همه اسکریپت هایی که از پیوندهای نقشه های گوگل بارگیری می شوند بارگیری شوند. درصورتیکه ما ویژگی sandbox را نمی دهیم ، این خطایی است که نمایش داده می شود و محتوای بارگیری شده در iframe را مسدود می کند –

Sandbox Attribute
توجه داشته باشید که باید مجوز صحیح را به sandbox بدهیم. جزئیات همه مجوزهای داده شده به sandbox را می توانید در اینجا پیدا کنید – https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox.

برای خلاص شدن از شرط بیش از 600px می توانیم از ویژگی placeholder در داخل amp-iframe استفاده کنیم.

مثالی برای همین در زیر آورده شده است –

&lt;!doctype html&gt;
&lt;html amp lang = "en"&gt;
   &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;script async src = "https://cdn.ampproject.org/v0.js"&gt;&lt;/script&gt;
      &lt;title&gt;Google AMP - Amp Iframe&lt;/title&gt;
      &lt;link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"&gt;
      &lt;meta name = "viewport" content = "width = device-width,  minimum-scale=1,initial-scale=1"&gt;

      &lt;style amp-boilerplate&gt;
         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}}
      &lt;/style&gt;
      &lt;noscript&gt;
         &lt;style amp-boilerplate&gt;
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         &lt;/style&gt;
      &lt;/noscript&gt;

      &lt;script async custom-element = "amp-iframe" 
         src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"&gt;
      &lt;/script&gt;

      &lt;style&gt;
         div {
            height:850px;
            text-align:center;
         }
      &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h3&gt;Google AMP - Amp Iframe&lt;/h3&gt;

      &lt;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&amp;t=&amp;z=13&amp;ie=UTF8&amp;iwloc=&amp;output=embed"&gt;

         &lt;amp-img layout = "fill" src = "images/loading.jpg" placeholder&gt;&lt;/amp-img&gt;
      &lt;/amp-iframe&gt;
   &lt;/body&gt;
&lt;/html&gt;
We have used amp-img as a placeholder as follows −

&lt;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&amp;t=&amp;z=13&amp;ie = UTF8&amp;iwloc = &amp;output = embed"&gt;
   
   &lt;amp-img layout = "fill" src = "images/loading.jpg" placeholder&gt;&lt;/amp-img&gt;
&lt;/amp-iframe&gt;

<!doctype html>

<head>

<title>Google AMP - Amp Iframe</title>

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>

body{

-webkit-animation:none;

-moz-animation:none;

-ms-animation:none;

animation:none

}

</style>

</noscript>

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>

We have used amp-img as a placeholder as follows −

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

در این حالت، محدودیت 600px و amp-iframe در 75٪ viewport در نظر گرفته نشده است. یک نشانگر بارگذاری (سه نقطه) بر روی تصویر نشان داده شده است به عنوان مکان نگهدارنده استفاده می شود ، که اساساً برای amp-iframe src است. پس از بارگیری محتوای iframe، تصویر برداشته شده و محتوای iframe همانطور که در خروجی نشان داده شده در زیر نشان داده شده است ، نشان داده می شود –

خروجی

Indicator Amp Iframe

منبع.

لیست جلسات قبل آموزش گوگل AMP

امتیاز دهید post

برچسب ها : آموزش برنامه نویسی موبایل آموزش گوگل AMP

نویسنده مطلب saber

آموزش Iframes در گوگل AMP

آموزش Iframes در گوگل AMP

شرایطی که برای iFrames دنبال می شود

خروجی

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

بدون دیدگاه

آموزش Iframes در گوگل AMP

شرایطی که برای iFrames دنبال می شود

خروجی

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه