Question

我正在使用带有表单的iFrame，该表单通过AJAX链接返回一些内容然后我将返回的内容从iFrame移动到主页面。

然而，ajax链接不起作用，单击链接后会创建错误“Element is null”。

如何从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>

Answer 1

我发现您的代码存在两个问题。

首先是解决方案（我认为： - ））

iframe加载后，其中的javascript会运行。 Javascript将观察者附加到父文档的link8。

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

或许将其更改为：

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

第二个问题（在这个特定情况下不是真正的问题）是，如果你将整个范围（包括脚本）移动到主文档，javascript将在主文档的上下文中再次运行。在您的情况下，您应该在移动内容后看到错误或警告，说明父级为空（或类似）。

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

Answer 2

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

如何将AJAX链接移出iFrame后，如何使其工作？

2 个答案: