淘宝网首页登陆手机版首页为什么要用js输出整页DOM

来源：蜘蛛抓取(WebSpider) 时间：2017-01-17 07:29 标签： 淘宝联盟首页
两种方法实现在HTML页面加载完毕后运行某个js
投稿：whsnow
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了通过两种方法实现在HTML页面加载完毕后运行某个js,需要的朋友可以参考下
代码如下: &script type="text/javascript"& window.onload=function(){ var userName="xiaoming"; alert(userName); } &/script&
以下为jQuery方法，需要引用jQuery文件。
代码如下: &script type="text/javascript"& $(document).ready(function(){ var userName="xiaoming"; alert(userName); }); &/script&
或者其简写
代码如下: $(function(){ var userName="xiaoming"; alert(userName); });
当dom加载完就可以执行（比window.onload更早）。在同一个页面里可以多次出现.ready() PS：两者的主要区别 window.onload： 当一个文档完全下载到浏览器中时，才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的，也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利，因为无需考虑加载的次序。、 $(document).ready{ }： 会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的，但是，并不意味着所有关联的文件都已经下载完毕。换句话说，当HMTL下载完成并解析为DOM树之后，代码就会执行。 举一个例子： 假设有一个表现图库的页面，这种页面中可能会包含许多大型图像，我们可以通过jQuery隐藏、显示或以其他方式操作这些图像。如果我们通过onload页面设置界面，那么用户在能够使用这个页面之前，必须要等到每一幅图像都下载完成。更糟糕的是，如果行为稍微添加给哪些具有默认行为的元素(比如链接)，那么用户的交互可能会导致意想不到的结果。然而当我们试用$(document).ready(){ }进行设置时，这个界面就会更早地准备好可用的正确行为。 使用$(document).ready(){ }一般来说都要优于试用onload事件处理程序，但必须要明确一点的是，因为支持文件可能还没有家在完成，所以类似图像的高度和宽度这样的属性此时不一定有效。 注：用把js放在页面底部的方法以及运用defer="defer" 的方法都是会出现问题的。最好使用上面的函数！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具使用phantomjs操作DOM并对页面进行截图需要注意的几个问题 - lola - 博客园
phantomjs是一个无界面浏览器，可用于网页截图和前端自动化测试，基于webkit内核（也就是chrome使用的内核），并使用js编写业务脚本来请求、浏览和操作页面。最近前端监控需要用到phantomjs，特地研究了一下这个组件，遇到几个坑，这里汇总起来，希望对大家尤其是刚入门者有所帮助。
1、如何操作页面中的DOM元素？
这个问题比较简单，官方API提供了page.evaluate函数，范例代码：
page.evaluate(function()
var plist = document.querySelectorAll("a");//获取所有链接
2、如何滚动到页面底部？
部分页面使用了lazyload，比如图片或js的延迟加载，只有滚动到底部才会触发，因此对于这种页面，如果要展示完整的页面，则需设法使底部可见，主要有3个办法：
　　1、使浏览器足够大，这样底部就显示了，可以设置viewPortSize很大：page.viewportSize = {width: 4800,height: 8000};
　　2、通过BOM方法操作滚动条，可以把滚动条滚动到一个很大的值，如：window.scrollTo(0,10000);也可以滚动到适应的高度：window.document.body.scrollTop = document.body.scrollH
3、如何延迟截图？
页面请求的资源，如图片、异步cgi、js等，返回的时间以及执行的长短都是不确定的，如果截图过早，可能很多空白区域，因此需要定时截图，在打开页面后，使用setTimeout来延迟截图：
window.setTimeout(function ()
page.render("json2form.png");
phantom.exit();
4、注意page.evaluate中的回调函数作用域链
对于初学者，很可能写出这样的代码（不是吗？看起来很正常，JS支持闭包呀？）：
var page = require('webpage').create();
var url = 'http://json2form.wikisoft.me//';
var globalVar = 1;
page.open(url, function (status)
if (status != "success")
console.log('FAIL to load the address');
page.evaluate(function()
var x = globalV//引用本js的一个全局变量
page.method();//执行phantomjs的一个api
有个问题需要明白，page.evaluate中的函数是在目标网页执行的，其上下文、作用域链已经不能与phantomjs执行这个js同日而语，因此请勿在evaluate中引用phantomjs的api或你这个js文件中的全局变量，否则出了错，都很难定位。
上述几个总结如有谬误也欢迎指正，最后附上一个完整的代码（请求某网页、对链接标记红框，并延迟截图，已验证）：
var page = require('webpage').create();
var url = '.cn/';
page.open(url, function (status)
if (status != "success")
console.log('FAIL to load the address');
&&&&&&& phantom.exit();
page.evaluate(function()
//此函数在目标页面执行的，上下文环境非本phantomjs，所以不能用到这个js中其他变量
window.scrollTo(0,10000);//滚动到底部
//window.document.body.scrollTop = document.body.scrollH
window.setTimeout(function()
var plist = document.querySelectorAll("a");
var len = plist.
while(len)
var el = plist[len];
el.style.border = "1px solid red";
window.setTimeout(function ()
page.render("json2form.png");
phantom.exit();
截屏效果图：

我要回帖

更多关于 淘宝联盟首页 的文章

 

随机推荐