Question

我在网页上有2个框架，左框架中填充了javascript对象的国家/地区名称列表。每个国家/地区也是主要对象中的对象，具有4个名称/值属性。我正在使用附加到body onload的以下函数：

        function populateList() {
            var list = top.frames[0].document;
            list.open()
            list.write("<h2>Countries</h2><ul>");
            for ( name in euMem ){
                if( typeof name !== 'object' ){
                    list.write( '<li><a href=\"\" onclick=\"updateFrame(\'' + name + '\');\">' + name + '</a></li>' );
                }
            }
            list.write("</ul>");
            list.close();
        }

当用户点击左侧的某个国家/地区名称时，打算运行此功能：

        function updateFrame( country ) {
            var infoFrame = top.frames[1].document;
            infoFrame.open();
            var size = Object.size(euMem[country]);
            infoFrame.writeln("<h1>Information for " + country + "</h1>");
            for( prop in euMem[country] ){
                infoFrame.writeln(prop + " : " + euMem[country][prop] + "<br>" );
            }
            infoFrame.close();
        }

这似乎在Chrome上运行正常，但在Firefox上我得到引用错误，指出未定义updateFrame。当我将updateFrame直接硬编码到HTML中时，它可以毫不费力地在firefox上工作，但是当它用document.write编写时，我得到了引用错误。

为什么这不适用于Firefox？

修改这是我编写的一个快速脚本，用于测试最基本的版本：

<html>
<head>
    <title>InfoPane</title>
    <script type="text/javascript">
        function test(name){
            alert(name);
        }

        function load(){
            document.write("<button onclick='test('John Doe');'>Alert Me!</button>");
        }
    </script>
</head>
<body onload="load();">

</body>
</html>

上述内容在Firefox上无效...

我能够将此代码作为基本示例使用，但无法将其扩展到上面的代码中以使其正常运行：

<html>
<head>
    <title>InfoPane</title>
    <script type="text/javascript">
        function test(){
            alert(this.name);
        }

        function load(){
            var btn = document.createElement('button'); 
            btn.name = 'John Doe'; 
            btn.onclick = test; 
            btn.innerHTML = 'Alert Me!'; 
            document.body.appendChild(btn);
        }
    </script>
</head>
<body onload="load();">

</body>
</html>

Answer 1

这是因为Firefox遵循规范但Chrome不是。

在最基本的版本中，页面在全局对象上定义一个属性，其名称为“test”，其值为函数。然后加载事件处理程序运行并调用document.write，它执行隐式document.open。由于文档不再在该点加载，因此会破坏旧文档的内容。到目前为止，这在Firefox和Chrome中都是一样的。

它们的区别在于每个规范，在Firefox中，open对不再加载的文档将为文档创建一个新的全局对象。当然，这个新的全局对象没有名为test的属性。另一方面，Chrome保留旧的全局（以及旧文档中的各种其他状态，如事件处理程序，间隔计时器等）。

如果您计划使用document.open重写文档并希望它们能够调用实用程序函数，那么您希望将这些实用程序函数放在其他全局框架中，这些框架的全局不会被吹走。

Answer 2

尝试使用window.parent.updateFrame(...)

firefox Javascript document.write（onclick）引用错误未定义函数

2 个答案: