调用document.close后，Document.links为空

Question

使用Firefox 3执行以下示例时：

<html>
 <head>
  <script language="javascript" type="text/javascript">
   <!--
   function openWindow(){
    var w = window.open('', 'otherWin', 'width=600,height=600');
    w.document.write(document.getElementsByTagName("html")[0].innerHTML);
    w.document.close();
    reportLinks(w.document.links);
   }

   function reportLinks(links){
    var report = 'links: '+links.length;
    for (var i=0;i<links.length;i++){
     report += '\n (link='+links[i].href+')';
    }
    alert(report);
   }
  //-->
  </script>
 </head>
 <body>
  <p><a href="javascript: openWindow()">Open Same Content and Show Links Report</a></p>
  <p><a href="javascript: reportLinks(document.links)">Show Links Report</a></p>
 </body>
</html>

您将看到，单击“显示链接报告”和单击“打开相同内容并显示链接报告”时显示的链接数均为2。但是，从此页面获取外部JavaScript文件引用时，行为似乎有所不同（如果需要，只需创建一个空文件some.js）。 单击“打开相同内容并显示链接报告”时，链接数将为0。

<html>
 <head>
  <script language="javascript" type="text/javascript" src="some.js"></script>
  <script language="javascript" type="text/javascript">
   <!--
   function openWindow(){
    var w = window.open('', 'otherWin', 'width=600,height=600');
    w.document.write(document.getElementsByTagName("html")[0].innerHTML);
    w.document.close();
    reportLinks(w.document.links);
   }

   function reportLinks(links){
    var report = 'links: '+links.length;
    for (var i=0;i<links.length;i++){
     report += '\n (link='+links[i].href+')';
    }
    alert(report);
   }
  //-->
  </script>
 </head>
 <body>
  <p><a href="javascript: openWindow()">Open Same Content and Show Links Report</a></p>
  <p><a href="javascript: reportLinks(document.links)">Show Links Report</a></p>
 </body>
</html>

这可能是加载页面以及reportLinks准确执行的时间的问题。 我假设添加了外部some.js，但该文档并未完全构建。 有没有一种方法可以注册此onload事件的reportLinks调用，以确保document.links已完成？

顺便说一下，该示例在两种情况下都适用于Google Chrome。

（在答案1之后添加）

正如Marcel K所建议的那样，我重写了示例，并以我真正希望事情进展的方式添加了代码。 现在对其进行测试，这个简单的示例似乎可以在Firefox和Chrome上运行。

<html>

 <head>

  <script type="text/javascript" src="some.js"></script>
  <script type="text/javascript">
   <!--
   function openWindow(){
    var w = window.open('', 'otherWin', 'width=600,height=600');
    w.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\n<html>\n'+
       document.getElementsByTagName("html")[0].innerHTML+'\n</html>');
w.onload=function(){
     reportLinks(w.document.links);
    };
    w.document.close();
   }

   function reportLinks(links){
    var report = 'links: '+links.length;
    for (var i=0;i<links.length;i++){
     report += '\n (link='+links[i].href+')';
    }
    alert(report);
   }
  //-->
  </script>
 </head>
 <body>
  <p><a href="javascript: openWindow()">Open Same Content and Show Links Report</a></p>
  <p><a href="javascript: reportLinks(document.links)">Show Links Report</a></p>
 </body>
</html>

我希望通过这个简单的示例来展示我正在编写的实际代码的简单情况。 复杂html的打印预览屏幕，一旦打开，我想在其中禁用所有href。 但是在那种情况下，永远不会调用onload处理程序...在这种情况下，如何以最可靠的方式注册onload处理程序？

非常感谢，马塞尔

Answer 1

正如我在评论中所说，这是一个非常奇怪的问题。 但是，我认为发生这种情况是因为包含外部脚本会导致（新页面的）页面渲染出现延迟，并且其DOM可能尚未准备好进行检查。

我的怀疑受到以下事实的支持：添加（new） defer属性似乎可以解决此问题：

设置此布尔值属性是为了向浏览器指示脚本将在文档被解析后执行。

可以在原始页面上设置defer属性，因为您需要它的精确副本。 如果包含脚本的位置无关紧要，则可以进行设置（例如，在包含的文件中使用document.write时，包含脚本的位置确实很重要）。

由于defer是布尔属性，当它简单地存在（ defer ）或（当使用XHTML时）设置为自身（ defer="defer" ）时， 将激活它。 在您的情况下，脚本包含应为：

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

---

关于你的更新更新 ：你还是应该插入在主页一个DOCTYPE（考虑使用HTML 5一个 ）。

而且我认为附加onload事件的方式是最好的方法。

但是考虑到您要实现的目标（没有超链接的打印预览）：您还可以使用“打印” media属性和样式超链接（如文本）； 这是方式比你正在做的东西越容易和JavaScript时禁用它的工作原理。

Answer 2

我可以使上面的示例在Firefox，Chrome和IE上可移植的唯一方法是通过在弹出窗口中加载的HTML中的内联JavaScript注册onload侦听器。 以下示例代码显示了操作方法。

<html>
 <head>
  <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  <p><a href="javascript: openWindow()">Open Same Content and Show Links Report</a></p>
  <p><a href="javascript: reportLinks(document.links)">Show Links Report</a></p>
 </body>
</html>

该页面使用script.js文件中的脚本。 以下显示了该文件的内容。

function openWindow(){
  var w = window.open('', 'otherWin', 'width=600,height=600');
  w.document.write(
    '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\n<html>\n'+
    document.getElementsByTagName("html")[0].innerHTML+
    '\n <script type="text/javascript">\n'+
    '  function addOnloadListener(listener){\n'+
    '    if (window.addEventListener) {\n'+
    '      window.addEventListener("load", listener, false);\n'+
    '    } else {\n'+
    '      window.attachEvent("onload",listener);\n'+
    '    }\n'+
    '  }\n'+
    '  addOnloadListener(function(){reportLinks(document.links);});\n'+
    ' </script>\n'+
    '</html>');
  w.document.close();
}

function reportLinks(links){
  var report = 'links: '+links.length;
  for (var i=0;i<links.length;i++){
    report += '\n (link='+links[i].href+')';
  }
  alert(report);
}

当将函数addOnloadListener直接放入JavaScript文件（未在页面中内联）时，它在IE6中不起作用，因为我相信它无法正确处理脚本条目的顺序。 如果未对addOnloadListener进行内联，则对addOnloadListener的内联调用不起作用，它只是在较早的版本中找不到该函数：

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

该代码只是一个简单的示例，实际上并没有做什么用。 我用它来禁用打印预览弹出页面中的所有链接。

总是欢迎使用更简单的方法为通过浏览器移植的弹出窗口注册onload侦听器。

谢谢，马塞尔