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

Posted 2023-05-08

技术标签:

【中文标题】从 iframe 访问和更改父页面（使用 jquery）【英文标题】：access and change parent page from iframe (with jquery) 【发布时间】：2012-05-31 16:24:58 【问题描述】：

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

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

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

谢谢。

【问题讨论】：

出于许多安全原因，这是不可能的。 @ChristianVarga 不完全正确：允许跨位于同一域中的元素。 【参考方案1】：

如果您的子页面（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>

希望这会有所帮助。

【讨论】：

【参考方案2】：

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

请注意，这两个部分都有自己的文档。从 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;

【讨论】：

【参考方案3】：

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

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

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

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

【讨论】：

以上是关于从 iframe 访问和更改父页面（使用 jquery）的主要内容，如果未能解决你的问题，请参考以下文章