Блог

Главная - Вопросы по программированию - document.getElementById не работает со встроенной Google data Studio

document.getElementById не работает со встроенной Google data Studio

#javascript #html #iframe #embed #google-data-studio

#javascript #HTML #iframe #Внедрить #google-data-studio

Вопрос:

Я использую этот код для динамического изменения URL-адреса iframe, и он хорошо работает, когда я использую «https://www.icqmail.com /» URL, но когда я использую этот URL «https://datastudio.google.com/embed/reporting/1se-9ZRSukdgQUiRqYTSjT8nFLTV0v8Uq/page/y5MR » data studio embedded У меня есть 404.

Когда я изменил src iframe на URL, подобный этому src="https://www.icqmail.com/" , оба сайта работают хорошо.

 <!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#000000">
    <link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
    <link rel="shortcut icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
      
    <style> 
        body { background: #232323; width: 95%; margin: 0 auto; }
        
        /* Responsive Container for iFrame */
        .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
        .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    </style>
    
    <title>Tech Ops PH | your amp;< IT / design amp;< partner </title>
  <script type="text/javascript">


   
    window.onmessage = (event) => {
    if (event.data) {
      
     document.getElementById("myIframe").src=decodeURI(event.data)

console.log(decodeURI(event.data));
      
    }
  
 }

</script>
  
</head>

<body>
    <div class='embed-container embed-responsive embed-responsive-4by3'>
            <iframe  id="myIframe" width="600" height="9000"  frameborder="0" style="border:0" allowfullscreen></iframe>
  
    </div>
</body>

</html>

Почему document.getElementById("myIframe").src код плохо работает с «https://datastudio.google.com/embed/reporting/1se-9ZRSukdgQUiRqYTSjT8nFLTV0v8Uq/page/y5MR » и хорошо работать с «https://www.icqmail.com /» как это исправить?

Ответ №1:

Через заголовки ответов веб-страницы могут сообщать браузеру, какие другие страницы разрешены для их создания.

Например. datastudio.google.com отправляет заголовок: x-frame-options: SAMEORIGIN Что означает «Страница может отображаться только во фрейме того же источника, что и сама страница». Документы

Но ваша другая страница этого не делает, поэтому ее можно встроить.

Комментарии:

1. Итак, я могу что-то сделать, чтобы использовать URL-адрес data Studio на моей стороне?

2. Вы не сможете загрузить сайт Google в iframe в любом крупном браузере, не изменив его. Это функция безопасности, а не дефект. Если вы скажете мне, какова ваша конечная цель, возможно, я смогу внести альтернативное предложение.

3. Но этот URL-адрес создается для встроенных целей, почему src=https://datastudio.google.com/embed/reporting/1se-9ZRSukdgQUiRqYTSjT8nFLTV0v8Uq/page/y5MR он работает хорошо? и document.getElementById("myIframe").src =https://datastudio.google.c... не работает, в чем разница?

Метки: