更改另一个页面上的 innerhtml 在 Chrome 中不起作用（它们在同一域中）

Question

我已经建立了一个带有 iframe 的网站来显示多个子页面。我的目标是从 Iframe 中加载的子页面更改父 window 上的 ID 值。所有页面都在同一个域中。我目前正在使用以下代码，它在 Internet Explorer 中运行良好，但在 Chrome 中没有任何作用？我希望有人有 awnser 来修复它，这样它就可以在所有浏览器中工作。提前致谢！

这是父级 window 的 html：

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Webpage</title>
  <base target="iframe">

  <!-- External Javascript -->
  <script src="javascript/index.js"></script>

  <!-- External CSS -->
  <link rel="stylesheet" href="css/index.css">

</head>

<body>

  <!-- Banner -->
  <div class="Banner">

    <div id="Site-name">
      Text to be changed
    </div>
    <img class="Logo" src="Afbeeldingen/Logo.png" alt="logo">

  </div>

  <!-- Body -->

  <div class="iframe">
    <iframe name="iframe" src="iframe.html"></iframe>
  </div>

  <!-- Footer -->
  <div class="Footer">
    <div class="copyright">
      Made by Jan Pieter van den Oever 2019 All rights reserved ®
    </div>

  </div>

</body>

</html>

这里是索引文件的 java 脚本：

function changeText(text) {
  document.getElementById('Site-name').innerHTML = text;
}

这是 iframe html:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>iframe</title>

  <!-- CSS -->
  <link rel="stylesheet" href="css/iframe.css">

</head>

<body>

  <div class="Button-container">
    <div class="Button-center">
      <div class="Button" onclick="location.href='nextpage.html';parent.changeText('The new text to be displayed in the parent')">
        <div class="Button-text">
          <br><br><br>
          Start
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Answer 1

与jQuery:

function changeText(newText) {

$('#Site-name').text(newText)

}

只需在您的项目中包含 jQuery 并将 changeText 函数替换为上面的函数。如果上面的代码不起作用，请尝试下面的代码：

function changeText(newText) {

$(document).find('#Site-name').text(newText);

}

Answer 2

这太令人困惑了，所以你在同一个 domain 下，我猜也是子 domain？域不是同源的唯一指标，您可以尝试以 iframe yourdomain.com/proxy.google.com 为例。所以对于你所有的浏览器关心的仍然是一个不同的来源，否则不要 iframe 它。调用它 .html 是没有意义的，你可以将它命名为 .exe 并且浏览器仍然会尝试呈现 dom.

当您尝试快速而肮脏地合并 2 个不兼容的框架时，就会出现此问题，例如您需要一个接口，其中主要使用 ExtJS 而子使用 Angular... 而唯一proper/legal/right答案是。

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

您可能会幸运地找到某种破解方法，但请相信我，这只是暂时的。 PostMessage 正是为此目的而编写的，因此 2 个全局变量可以安全地通信并对事件做出反应。

更改另一个页面上的 innerhtml 在 Chrome 中不起作用（它们在同一域中）

Changing the innerhtml on another page does not work in Chrome (they are in the same domain)

javascript

iframe

google-chrome

parent

innerhtml