Загрузите javascript-файл cdn в amp iframe - PullRequest
Новая
       5

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

0 голосов
/ 07 сентября 2018

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

"Uncaught DOMException: не удалось прочитать свойство cookie из «Документ»: документ помещен в «песочницу» и не содержит флаг «allow-same-origin». "

Обычный javascript отлично работает в amprarame, когда я вставляю html-файл и код iframe. Спасибо заранее, если кто-нибудь поможет мне из этой ошибки

html имя файла: - 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">

1 Ответ

0 голосов
/ 28 сентября 2018

не позволяют вставлять 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>
...