Dron 博客

坚持创新，追求卓越

仅显示以下 4 篇带「浏览器」关键字的文章。 返回词云  或  查看全部文章

将 WebWorker 改造成无外链文件模式

2013-05-06 by Dron

WebWorker 允许我们在浏览器中使用多线程来进行高耗时计算，但是，WebWorker 必须引用同域的 JS 文件，这在有些场景下不是很方便应用。

我尝试对此进行包装，期望调用 WebWorker 的地方可以直接声明 Worker 文件的内容，不需再外链一个 JS 文件，以下是未经所有浏览器测试的代码，如需应用，你可能需要做些测试和改进。

var myWorker = function(){
  var functionBodyRegx, URL, contentType, code, url;

  functionBodyRegx = /^[^{]+\{([\s\S]*)\}$/;
  URL = window.URL || window.webkitURL;
  contentType = { type: "text/javascript; charset=utf-8" };

  return function( fn ){
    code = fn.toString().match( functionBodyRegx )[ 1 ];
    url = window.opera ? 
      "data:application/javascript," + encodeURIComponent( code ) :
      URL.createObjectURL( new Blob( [ code ], contentType ) );

    return new Worker( url );
  }
}();

测试代码：

var worker = new myWorker( function(){
  onmessage = function( event ){
    postMessage( event.data );    
  }
} );

worker.onmessage = function( event ){
  alert( event.data.message );
};

worker.postMessage( { message: "hello myWorker!" } );

戳这里

在 Chrome/Safari/Firefox 下测试通过，IE/Opara 下未做测试。

阅读全文

Firefox 浏览器 document.write 之后...

2013-01-07 by Dron

今天遇到一个诡异问题，经查问题出现在 Firefox 浏览器上 document.write 之后，我把复现问题的主要代码摘出来了：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <script>
    // navigator.a = 1;
    setTimeout( function(){
      document.write( "blank" );
      alert( "window: " + ( window.window === window ) );
      alert( "navigator: " + ( window.navigator === navigator ) );
      alert( "document: " + ( window.document === document ) );
      alert( "location: " + ( window.location === location ) );
      alert( "String: " + ( window.String === String ) );
    }, 1 );
  </script>
</html>

如果不运行代码，凭经验你们先猜猜以上 alert 都会是什么结果？（限 Firefox 浏览器）

戳这里在线试试

打开 // navigator.a = 1; 这个注释后，再重新运行一下试试。

最后，我也没弄明白为什么。

阅读全文

危险：IE 下使用 cloneNode 注意事项

2012-04-20 by Dron

在开发「百度地裂特效」时，发现了一些匪夷所思的 Bug，第一反应是特效本身的代码与页面上原有的脚本发生了冲突，经过调试发现，问题出现在 cloneNode。

cloneNode 是 HtmlElement 上的方法，用于创建指定 DOM 节点的拷贝，它接受一个布尔参数 include_all，如果 include_all 设置为 true，则副本会带有指定节点的所有子节点。

然而，<script> 标签也是 DOM 节点，cloneNode 对其有效，经实测各浏览器（尤其是 IE）对 cloneNode 执行结果表现不一致，主要现象为以下两种：

  • IE，至少是 IE8 及以下，对某节点 cloneNode 时，如果该节点包含 <script> 节点，那么 <script> 节点的脚本内容「有可能」会被再次执行一次。
  • 非 IE 浏览器，cloneNode 某节点，包含的 <script> 节点的脚本内容不会被再次执行。

IE 以外的浏览器表现令我满意，而针对于上面所述 IE 的「有可能」，还分以下两种情况：

阅读全文

网页自动滚屏实现技巧

2011-06-26 by Dron

网页上，为了方便用户及时看到有价值的信息，通常会采用自动滚屏的交互效果，使变化的信息在第一时间呈现。

滚屏的实现，普遍做法是改变网页根节点的 scrollTop 和 scrollLeft 属性，就像这样：

document.documentElement.scrollTop = 500; // 滚动到 500px 的位置

scrollTop 和 scrollLeft 属性接受一个数值，需要涉及到元素位置的计算（记得那个复杂的位置计算的算法么？），对于需要滚动至某个元素可见，scrollTop 和 scrollLeft 不见得是最优的方案，其实，除了这种办法，我们还可以有以下两种办法来达到滚动的目的。

地址栏中 # 号后面的字符串叫做 hash，浏览器在网页打开完成后或者在 hash 值改变时，会自动滚屏至名称与 hash 值相等的锚点元素位置上，利用这个特性，我们可以在需要的位置插入锚名，然后通过改变 location.hash 的值来达到滚屏效果，具体写法这里就不细说了。

这种方案有一定缺陷，在某些浏览器下，hash 值的改变会产生浏览历史记录，导致对历史记录的破坏，影响用户使用前进后退功能；而且，在一些网页里，hash 值可能会有其它的用途，这样做将影响到这些功能。

阅读全文