在iframe和父页面之间传递jquery变量

Question

在iframe和父页面之间传递jquery变量

20

我该如何使用jQuery与 iframe 协作？获取并传递 iframe 中的变量到 body ，再从 body 传递至 iframe。下面是我的示例代码，如何让 iframe 中的按钮点击事件对 body 中的 #test 生效？还有，如何获取 iframe 中的变量 x？

<body>
var x = "whatever";
<div id"test"></div>
<iframe width="200px" height="200px" src="page.html"></iframe>
</body>

在page.html文件中，我有以下内容：

<button>clickme</button>
<script>
var elm = $('<span>content</span>');
    elm.appendTo('#test')
</script>

- Hussein

6

请注意，大多数浏览器只允许在iframe中同时来自完全相同域的两个文档之间进行父文档的操作，这是因为同源策略的限制。 - tdammers

@tdammers - 这是一个很好的观点。 - LiamB

是的，它曾经咬了我一口。我有一个很棒的脚本，可以根据内容调整iframe的高度，但它只在测试环境中有效，因为两个页面都是从本地主机提供的 :-( - tdammers

有人能告诉我如何动态地传递src的值吗？ - ketan italiya

3个回答

14

从父母的角度来看：

var iFrameValue = $('#iframe').get(0).contentWindow.myLocalFunction();

或者

var iFrameValue = $('#iframe').get(0).contentWindow.myLocalVariable;

< p>从 iframe 的角度看

<script type="text/javascript">

var myLocalVariable = "hello";

function myLocalFunction () {
    return "hello";
}

</script>

- sparkyspider

2

您可以使用contentWindow和contentDocument属性，如果同源策略不是问题。我已经设置了一个演示。查看演示的代码和iframe的代码。

- Salman A

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LiamB · Accepted Answer

$("#myid", top.document);

或者

$("#myid", parent.document.body);

这将使您能够访问IFRAME的容器。

参考链接：http://groups.google.com/group/jquery-en/browse_thread/thread/5997ef4a60a123af