Question

Chrome v75似乎引入了一个错误，即如果您以编程方式替换iFrame的src，它将替换整个页面而不是iFrame。

这不是在v74上发生的，我还无法获得一个测试用例（目前），它只是在我们的网站上失败了。（从v74更改为v75以来，网站没有更改，只有Chrome发生了更改）

它第一次似乎可以正常工作，但是当您再次对其进行更改时（在我们的案例中，查看报表深入研究），它会导致整个页面（即iFrame的父项）加载您尝试加载到iFrame中的src

使用纯Java脚本还是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。

Answer 1

好吧，所以原来这是Chrome中的错误，而不是其他任何错误，是的，严格来说不是SO问题，但是看到SO在Google中排名很高（可以使用其他搜索引擎），我认为更好保留它作为解决方案，而不是简单地删除它，以防万一其他人遇到类似的问题。

原因在我的问题中被概述为编辑，解决方案是从iFrame中删除标签，并以编程方式将'target =“ _ parent”'属性添加到iFrame中的任何链接

我们通过jQuery做到这一点，我相信通过香草Java脚本同样容易。

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

将其添加到页面加载后运行的javascript中，并将其替换为将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年6月）的稳定版本，因此我们必须将变通办法添加到生产中，以便我们的CRM可以正常工作使用Chrome v75。感谢@Kaiido确认。

Chrome 75-设置iFrame src属性会导致iFrame父级加载iFrame内容

1 个答案: