Question

假设我的网页位于www.example.com/foo，其中包含<iframe> src="http://www.example.com/bar"。我希望能够从/bar发起一个事件并让/foo听到它。使用Prototype库，我尝试了以下操作但没有成功：

Element.fire（parent，'ns：frob'）;

当我这样做时，在Firefox 3.5中，我收到以下错误：

节点不能用于创建它的文档之外的文档“code：”4 第0行

不确定这是否与我的问题有关。是否有一些安全机制阻止/bar中的脚本启动/foo中的事件？

Answer 1

如果iframe是来自相同域的页面，则可以通过父窗口定义的函数处理事件（请参阅MDC关于Same Origin Policy的文章）;但是，事件不会从iframe冒出来到父页面（至少在我的测试中没有）。

Answer 2

我还没有测试过这个跨浏览器，但它可以在FF中运行。

在iFrame中，您可以触发元素parent.document：

Event.observe(window, 'load', function() {
  parent.document.fire('custom:event');
});

并在父框架中，您可以通过以下方式捕获它：

document.observe('custom:event', function(event) { alert('gotcha'); });

Answer 3

而不是在主页面上捕捉一个事件，你可以在iframe上捕捉事件，并在主页面上调用一个函数。

<-- main page -->
function catchIt()
{
 // code here
}


<-- iframe page -->

function doIt()
{
 top.catchIt(); 
}

<a onclick="doIt();">test</a>

我认为它会起作用，但没有测试它

Answer 4

这应该可以按预期工作，以执行您需要的操作：

index.html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
    $(document).on('eventhandler', function() {               
        alert('event was fired');
    });
}); 
</script>

iframe.html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
    parent.$(parent.document).trigger('eventhandler');  
});
</script>

从iframe触发的事件是否可以由其父元素中的元素处理？

4 个答案: