Question

我已经建立了一个带有iframe的网站来显示多个子页面。我的目标是从Iframe中加载的子页面更改父窗口上ID的值。所有页面都在同一个域中。我目前正在使用以下代码，并且在Internet Explorer中可以正常工作，但是在Chrome中什么也没做？我希望有人会修复该问题，使其能够在所有浏览器中正常工作。预先谢谢你！

这是父窗口的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

这是如此令人困惑，所以我猜您也属于同一个域，也属于子域？域不是唯一相同来源的指标，您可以尝试以iframe yourdomain.com/proxy.google.com为例。因此，对于您所关心的所有浏览器，它仍然是不同的来源，否则不要对其进行内陷。将其命名为.html是没有意义的，您可以将其命名为.exe，浏览器仍将尝试渲染dom。

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

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

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

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

2 个答案: