javascript - 使用 javascript/html 控制 iframe 内容

Question

在我的网页中，我有一个像这样的 iframe：

<iframe src="thispage.html" width="100%" height="600" frameBorder="2"></iframe>

（iframe 是同一站点上的一个页面......）

我的问题是，是否可以在具有 iframe 的页面上使用 javascript 来控制“thispage.html”（比如使用 javascript 函数？）

Answer 1

是的你可以。说你iframe的身份证是'myIFrame'

<iframe id="myIFrame" src="thispage.html"
    width="100%" height="600"
    frameBorder="2">
</iframe>

然后，在您的 JavaScript 中添加以下内容：

// Get the iframe
const iFrame = document.getElementById('myIFrame');

// Let's say that you want to access a button with the ID `'myButton'`,
// you can access via the following code:
const buttonInIFrame = iFrame.contentWindow.document.getElementById('myButton');

// If you need to call a function in the iframe, you can call it as follows:
iFrame.contentWindow.yourFunction();

希望能帮助到你 ：）

Answer 2

是的，如果你给你的 iframe 一个 ID，例如

<iframe src="thispage.html" width="100%" height="600" frameBorder="2" id="MyIframe"></iframe>

您可以像这样访问内部窗口：

var iw = document.getElementById("MyIframe").contentWindow;

所以你可以调用它的函数，例如

iw.theFunctionInsideIframe();

您可以定位 DOM 元素，例如

var anElement = iw.document.getElmentByID("myDiv");