如何让AJAX链接在移出iFrame后正常工作？

我正在使用带有AJAX链接返回某些内容的表单。
然后，我将返回的内容从iFrame移出到主页面。如何让AJAX链接在移出iFrame后正常工作？

但是，ajax链接不起作用，单击链接后会创建错误“元素为空”。

如何从iFrame移动内容并仍然可以使用AJAX链接？

这里是由iFrame的返回代码：

<span id="top"> 
    <a id="link8" onclick=" event.returnValue = false; return false;" href="/item_pictures/delete/7"> 
     <img src="/img/delete.bmp"/> 
    </a> 

    <script type="text/javascript"> 
     parent.Event.observe('link8', 'click', function(event) { 
      new Ajax.Updater('top','/item_pictures/delete/3', { 
       asynchronous:true, evalScripts:true, 
       onCreate:function(request, xhr) { 
        document.getElementById("top").innerHTML = "<img src=\"/img/spinner_small.gif\">"; 
       }, 
       requestHeaders:['X-Update', 'top'] 
      }) 
     }, false); 
    </script> 

</span>

来源

2010-05-30 KcYxA

我所做的就是将AJAX调用移出到外部js文件，并在链接被点击后调用函数。它现在有效。

来源

2010-05-31 00:11:42 KcYxA

我看到两个问题与您的代码。

首先解决（我想:-)）

当你的iframe中加载，在它的JavaScript运行。 Javascript将一个观察者附加到父文档的链接8。

在观察者的内部定义了另一个函数（onCreate）。该函数将在iframe上下文中运行，使得文档对象引用iframe而不是主文档。当您从iframe中移除link8以将其移至主文档时，document.getElementById（“top”）将变为null - 因此会出错。

也许它更改为：

parent.document.getElementById("top").innerHTML = "<img src=\"/img/spinner_small.gif\">";

问题二（这是不是真的在这种特殊情况下的一个问题）时，如果移动整个跨度（包括脚本）到主文档时，JavaScript将运行再次在主文档的上下文中。就你而言，移动内容后应该会看到一个错误或警告，说明父项为空（或类似）。

要消除第二个问题，请将您的iframe数据以两个div或类似的形式返回。然后复制只有div的HTML到主文档。

来源

2010-05-30 21:32:18 Luc

谢谢你，吕克。添加“父母”前缀确实已经删除了我的“元素为空”问题。但是，AJAX仍然没有运行。没有错误。我所做的就是将AJAX调用移出到外部js文件，并在链接被点击后调用该函数。它现在有效。 – KcYxA 2010-05-31 00:11:16

如何让AJAX链接在移出iFrame后正常工作？

回答

相关问题