Chrome 75 - установка атрибута iFrame src приводит к тому, что родитель iFrame загружает содержимое iFrame - PullRequest
Новая
       1

Chrome 75 - установка атрибута iFrame src приводит к тому, что родитель iFrame загружает содержимое iFrame

0 голосов
/ 18 июня 2019

В Chrome v75 появилась ошибка, из-за которой, если вы программно заменяете src iFrame, он заменит всю страницу вместо iFrame.

Этого не произошло на v74, и я не могу получитьтестовый пример для работы (пока), он просто не работает на нашем сайте.(Сайт не изменился с момента перехода с v74 на v75, изменился только Chrome)

Кажется, что он работает нормально с первого раза, но потом, когда вы меняете его снова (в нашем случае, при просмотре отчета), онзаставляет всю страницу (т.е. родительский элемент iFrame) загружать src, который вы пытались загрузить в iFrame.

Также не имеет значения, используете ли вы чистый Javascript или (в нашем случае) JQuery, оба вызываютта же проблема.

РЕДАКТИРОВАТЬ: После нескольких часов работы детектива, я нашел ошибку.Установка тега в содержимом iFrame приводит к тому, что Chrome загружает содержимое iFrame в его родительский элемент, а не в сам iFrame.

Я настроил учетную запись Plunker с демо: https://plnkr.co/edit/UQ0gBY?plnkr=legacy&p=info

Простотак что я могу опубликовать ссылку на Plunker, вот код для основного файла и содержание iframe 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script>

    function onLoaded() {
        // find element
        let button = document.getElementById("button");
        button.addEventListener("click",function(e){
            // Add a random number on the end as a cache buster
            document.getElementById('frame-finance-custom').src = 'test2.html?rnd=' + Math.random();
        },false);
    };

    document.addEventListener('DOMContentLoaded', onLoaded, false);

</script>
</head>
<body>
<div>IFrame Src Changing Test</div>
<div>
    <div id="div-frame-finance-custom" style="float:left;width:33%">
        <iframe id="frame-finance-custom" name="frame-finance-custom" class="iframe"
                style="border:1px solid black; width: 100%; height: 350px; overflow-y: scroll; vertical-align: top;">
            no data
        </iframe>
    </div>
    <div style="float:left;margin-left:1em;">
        Detail: Loading an iframe page with a &lt;Base&gt; tag in it with target set to "_parent" will cause any refresh of that frame to replace the parent document<BR>
        <BR>Instruction: <UL><LI>Click the 'Update Frame' Button, this will load test2.html into the frame. <LI>Click it again & it will replace the iframe's parent with the content of the iFrame.</UL>
        <BR>Confirmation: Remove the &lt;Base&gt; tag from the header of test2.html & reload, it will work as expected.
    </div>
</div>
<br clear=both>
<div>
    <button id="button">
        Update Frame
    </button>

</div>
</body>
</html>

Содержимое IFrame (test2.html): 

<!DOCTYPE html>
<html lang="en">
<head>
    <base target="_parent"/>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>This is the frame content</div>
</body>
</html>

Примечание, используяих новый макет не работает, но он использует их прежний макет.Не стесняйтесь сохранять файлы локально и напрямую использовать Chrome.

1 Ответ

0 голосов
/ 19 июня 2019

Хорошо, так что это оказалось ошибкой в ​​Chrome, а не чем-то еще, так что да, строго не вопрос SO, но, учитывая, что SO занимает хорошие позиции в Google (доступны другие поисковые системы), я подумал, что лучшечтобы оставить его здесь как решение, а не просто удалить его, просто на случай, если у кого-то еще есть подобная проблема.

Причина изложена в виде редактирования в моем вопросе, решение состоит в том, чтобы удалитьтег из iFrame и программно добавить атрибут 'target = "_ parent" "для любых ссылок в iFrame.

Мы делаем это с помощью jQuery, я уверен, что это так же просто с помощью ванильного Javascript. 

$('a').attr('target','_parent');

Добавьте это в javascript, который запускается при загрузке страницы, и он заменит add target = "_ parent" на любые ссылки на странице.

например 

<script>
  function onLoaded() {
     // find all links and add the target attribute
     $('a').attr('target','_parent');
  };

  document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>

Как говорит @Kaiido в своем комментарии, он, по-видимому, исправлен в Chrome v77, но это не текущий (по состоянию на июнь 2019 года) стабильный выпуск, поэтому нам пришлось добавить обходной путь в производство, чтобы наша CRM работала сChrome v75.Спасибо @Kaiido за подтверждение этого.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...