JavaScript书签触发浏览器怪异模式及主页面异常问题咨询

主页面空白并显示[object HTMLButtonElement]的原因 #

当你把代码作为javascript:协议的书签运行时，浏览器会把代码的返回值当作新页面内容渲染。你的代码最后一行是popup.document.body.appendChild(but);，这个DOM方法的返回值就是被添加的按钮元素but，浏览器会把这个元素的字符串形式[object HTMLButtonElement]输出到页面，直接替换掉原主页面的内容，所以主页面变成空白且显示这段文本。

怪异模式警告的原因 #

浏览器渲染的是孤零零的元素字符串，没有完整的HTML文档结构（比如缺少<html>、<head>等标签），因此会触发怪异模式（Quirks Mode），这就是控制台警告的来源。

修复方案 #

在代码末尾添加void 0;或return;，让代码返回值变为undefined，浏览器就不会替换主页面内容了。同时可以给弹窗元素加一些基础样式，提升可用性，优化后的书签代码如下：

javascript:(function(){
  var popup = open("", "Popup", "width=400,height=400,top=250,left=550");
  var area = popup.document.createElement("textarea"); 
  area.style.width = "380px";
  area.style.height = "280px";
  var but = popup.document.createElement("button"); 
  but.textContent = "提交";
  popup.document.body.appendChild(area); 
  popup.document.body.appendChild(but); 
  void 0;
})();

把代码包在自执行函数里，还能避免污染全局变量，确保逻辑独立运行。

内容的提问来源于stack exchange，提问作者jslayer