javascript - 从 iframe 访问和更改父页面（使用 jquery）

Question

有什么方法可以从 iframe 访问父页面（并更改父页面）？

<body>
   <iframe src="frame1.html" name="frame1" height="100%"></iframe>
   <div id="test1"></div>
</body>

在 frame1.html 中<a href=..>，我想在单击时将文本“ <h1>clicked</h1>”添加到中。<div id="test1"></div><a href..>

谢谢。

score 24 · Accepted Answer

如果您的子页面（frame1.html）与父页面位于同一域，您可以在子窗口中编写如下代码：

 $('#test1', parent.document).html('<h1>clicked</h1>');

第二个参数提供context在其中搜索与第一个参数匹配的元素。文档在这里：http ://api.jquery.com/jQuery/#jQuery-selector-context

 jQuery( selector [, context ] )

因此，您的代码 (frame1.html) 可能如下所示：

 <a href="..." 
  onclick="$('#test1', parent.document).html('<h1>clicked</h1>');">click me</a>

希望这可以帮助。

score 9 · Accepted Answer

重要提示：只有在父 iframe 和 iframe 都来自同一个域的情况下，才能访问输入和输出 iframe，否则由于Same Origin Policy ，您无法访问。

请注意，这两个部分都有自己的文档。从 iframe 访问父对象很简单

parent.document

并且从父母那里是以下之一：

window.frames['iframeName']

(window.frames.length /*gives you the number of iframes in your document*/ )

或使用 id 引用它并执行以下操作（注意支持！）

var iframe = document.getElementById('iframe');
var doc = iframe.contentDocument? iframe.contentDocument:iframe.contentWindow.document;

score 4 · Accepted Answer

下面的代码应该可以正常工作：

$(parent.document).find("#selector");

选择器是从父文档中执行一些动作的。例如：

$(parent.document).find("#selector").remove();

3 回答 3