Question

目前我有两个HTML文件。一个名为index.html，另一个名为editor.html

在index.html内部我有一个iframe的iframe。上面这个iframe也是我制作的通知系统。要运行通知，它使用我创建的函数，可以这样使用：

Notification("msg");

当我从index.html内部调用它时，此函数很有用，因为该函数修改了index.html的html代码（通过.innerHTML）。当我尝试从editor.html

调用它时会出现一个问题

即使在index.html的顶部将editor.html添加到index.html中，也是如此：

<script src="editor.html"></script>

我在editor.html中写了这个：

<script src="index.html"></script>

当我尝试从editor.html运行Notification函数时出现错误，因为该函数位于index.html内并修改了index.html，不是 editor.html。

请记住，在每个index.html和editor.html中，javascript都在标记中，因为文件中还有其他html。如果您需要进一步确认，请致谢并提出问题。

Answer 1

如果iframe和容器位于同一个域中，这样可以正常工作。

您可以将Notification函数的定义放在单个外部文件中，例如main.js：

function Notification( msg )
{
    var div = document.getElementById("notification-div") ;
    div.innerHTML = msg ;
    /* The important thing is make this to be the container window when
     * Notification is called, so document is the desired one.
     */
}

在index.html中，您应该使用iframe和div来打印通知文本：

<div id="notification-div"></div>
<iframe src="editor.html" width=300 height=200></iframe>

然后在index.html中包含main.js：

<script type="text/javascript" src="main.js"></script>

在index.html中，您可以直接调用它，只要这是窗口：

Notification( "From index.html" ) ;
/* window will be this in the Notification function, so the call to
 * document.getElementById, will actually be window.document.getElementById
 */

在editor.html中，您可以将容器窗口对象称为顶部。因此，此调用将给出所需的结果：

top.Notification( "From editor.html" ) ;
/* top will be this in the Notification function, so the call to
 * document.getElementById, will actually be top.document.getElementById
 */

在脚本标记内的不同HTML文件中运行JavaScript函数

1 个答案: