Загрузить файл javascript cdn в amp iframe

Я хочу загрузить javascript из cdn в amp iframe, но выдает ошибку.

"Uncaught DOMException: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag."

Обычный javascript отлично работает в amp iframe, поскольку я вставляю HTML-файл и код iframe.

testfile.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <p>Click the button to display an alert box.</p>
        <button onclick = "myFunction()">Try it</button>
        <script>
            function myFunction() {
                alert("Hello! I am an alert box!");
            }
        </script>
    </body>
</html>


<amp-iframe width = "300" height = "200" sandbox = "allow-scripts allow-popups allow-modals" layout = "responsive" frameborder = "0" src = "https://test.com/testfile.html">

Вам нужен атрибут sandbox? В противном случае попробуйте добавить allow-same-origin

— 07.09.2018 15:56

добавьте этот скрипт для amp <script async custom-element = "amp-iframe" src = "cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

— 07.09.2018 16:15

Я пробовал использовать описанные выше методы. Но это все еще не работает. На самом деле amp iframe блокирует источник.

— 15.09.2018 20:13

php amp-html

07.09.2018 15:54

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Symfony Station Communiqué - 7 июля 2023 г

Это коммюнике первоначально появилось на Symfony Station .

Оживление вашего приложения Laravel: Понимание режима обслуживания

Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...

Установка и настройка Nginx и PHP на Ubuntu-сервере

В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.

Коллекции в Laravel более простым способом

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...

Как установить PHP на Mac

PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...

1 104

Ответы 1

<amp-iframe> не позволяют вставлять iframe из того же домена. Он должен быть из другого домена. Попробуйте добавить свой iframe из другого домена. Также элементы должны располагаться за пределами первых 75% области просмотра или на 600 пикселей сверху (в зависимости от того, что меньше). Учитывая эти 2 балла, вы сможете увидеть iframe на AMP. Взгляните на прилагаемый образец кода ... И измените свой amp-iframe src соответствующим образом.

<!doctype html>
<html ⚡>
<head>
  <meta charset = "utf-8">
  <title>My AMP Page</title>
  <link rel = "canonical" href = "self.html" />
  <meta name = "viewport" content = "width=device-width,minimum-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 src = "https://cdn.ampproject.org/v0.js"></script>
  <script async = "" custom-element = "amp-iframe" src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  <style amp-custom>
    h1 {
      margin: 1rem;
    }
  </style>
</head>
<body>
  <h1>Hello AMPHTML World!</h1>
  <amp-img src = "https://unsplash.it/600/600" width=600px height=600px ></amp-img>
  <div>
    <amp-iframe width = "300px" height = "200px" sandbox = "allow-scripts allow-same-origin allow-forms allow-top-navigation" layout = "responsive" frameborder = "0" src = "https://test.com/testfile.html"></amp-iframe>
  </div>
</body>
</html>

28.09.2018 13:40

Другие вопросы по теме

Google не сканирует мои ссылки amp из тега amphtml при проверке исходной страницы

Способы улучшения заголовка видео в amp-video вместо тегов H3

Мета-имя в неканоническом amp html?

Увеличить кеширование «Javascript, загруженный из CDN» на странице с поддержкой GoogleAMP?

<amp-carousel> не работает должным образом с динамическими данными с использованием <amp-list>

Wordpress: добавление тега <noscript> автоматически закрывает тег <head>

AMP Analytics encodeURIComponent для отслеживания пикселей

Как сделать так, чтобы AMP-сайт работал только для мобильных устройств и ПК для обычных пользователей ПК

Как динамически скрыть контейнер div на странице AMP

Можно ли в усилке добавить ссылки в опциях?

Загрузить файл javascript cdn в amp iframe

Ответы 1

Другие вопросы по теме

Похожие вопросы