浏览器抓取网页(长沙会计培训--DOM属性)

　　浏览器抓取网页(长沙会计培训--DOM属性)

　　2021-11-01

　　1、窗口

　　获取浏览器窗口大小，window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽度和高度是指去除菜单栏、工具栏和边框等占位符元素后用于显示网页的净宽度和高度。

　　对应的还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高

　　2、导航器

　　navigator 对象表示有关浏览器的信息。最常用的属性包括：

　　3、屏幕

　　screen对象表示屏幕的信息，常用的属性有：

　　4、位置

　　location 对象表示当前页面的 URL 信息。

　　可以通过 location.href 获取。要获取 URL 各部分的值，可以编写：

　　location.protocol; // 'http'

location.host; // 'www.example.com'

location.port; // '8080'

location.pathname; // '/path/index.html'

location.search; // '?a=1&b=2'

location.hash; // 'TOP'

要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。

5、document

　　文档对象代表当前页面。由于 HTML 在浏览器中以 DOM 的形式表示为树结构，因此文档对象是整个 DOM 树的根节点。

　　文档的title属性是从HTML文档中的xxx读取的，但是可以动态改变：

　　6、DOM 操作

　　insertBefore 如果我们想在指定位置插入子节点怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会被插入到referenceElement之前。

　　7、操作文件

　　文件 API

　　由于 JavaScript 对用户上传的文件的操作非常有限，尤其是无法读取文件内容，因此很多需要操作文件的网页不得不使用 Flash 等第三方插件。

　　随着 HTML5 的普及，新的 File API 允许 JavaScript 读取文件内容并获取更多文件信息。

　　HTML5的File API提供了两个主要的对象，File和FileReader，可以获取文件信息和读取文件。

　　var

fileInput = document.getElementById('test-image-file'),

info = document.getElementById('test-file-info'),

preview = document.getElementById('test-image-preview');

// *敏*感*词*change事件:

fileInput.addEventListener('change', function () {

// 清除背景图片:

preview.style.backgroundImage = '';

// 检查文件是否选择:

if (!fileInput.value) {

info.innerHTML = '没有选择文件';

return;

}

// 获取File引用:

var file = fileInput.files[0];

// 获取File信息:

info.innerHTML = '文件: ' + file.name + '

' +

'大小: ' + file.size + '

' +

'修改: ' + file.lastModifiedDate;

if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {

alert('不是有效的图片文件!');

return;

}

// 读取文件:

var reader = new FileReader();

reader.onload = function(e) {

var

data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'

preview.style.backgroundImage = 'url(' + data + ')';

};

// 以DataURL的形式读取文件:

reader.readAsDataURL(file);

});

　　8、AJAX

　　同源政策，

　　JavaScript 发送 AJAX 请求时，URL 的域名必须与当前页面完全相同。

　　完全一致是指域名应该相同（和不同），协议应该相同（http和https不同），端口号应该相同（默认为:80端口，不同于:8080)

　　解决跨域

　　一种是通过Flash插件发送HTTP请求。这种方法可以绕过浏览器的安全限制，但必须安装Flash并与Flash交互。但是Flash使用起来很麻烦，现在也越来越少用了。

　　第二种是通过在同源域名下设置代理服务器进行转发，JavaScript负责将请求发送到代理服务器：

　　'/proxy?url=http://www.sina.com.cn'

　　然后代理服务器返回结果，从而符合浏览器的同源策略。这种方法的问题在于它需要在服务器端进行额外的开发。

　　第三种方式叫做JSONP，它有一个限制，只能使用GET请求，并且需要返回JavaScript。这种方式的跨域其实就是使用浏览器允许跨域引用JavaScript资源：（动态插入脚本标签）

　　相当于动态读取外域的JavaScript资源，最后等待接收回调；

　　JSONP的原理是动态添加script标签，将接口地址与定义好的回调函数拼接起来，赋值给script标签的src属性。插入成功后，会调用回调函数，返回接口请求的数据。定义好的回调函数里面处理请求的结果

　　成为CORS的第四种方式

　　如果浏览器支持 HTML5，那么你可以一劳永逸地使用新的跨域策略：CORS。CORS 代表 Cross-Origin Resource Sharing，即如何按照 HTML5 规范定义的跨域访问资源。

　　对方服务器是否愿意为你设置一个正确的Access-Control-Allow-Origin，只要响应头Access-Control-Allow-Origin是，或者*，跨域请求就可以成功

　　9、承诺

　　这种链式的好处是首先统一执行 AJAX 逻辑，不管结果如何处理，然后根据结果是成功还是失败，在某个时间点调用成功或失败函数。未来。

　　古人说：“君子许诺一千块钱”，而这个“许诺将来执行”的对象在 JavaScript 中称为 Promise 对象。

　　Promise 有多种开源实现，在 ES6 中标准化，浏览器直接支持

　　可以看出，Promise 最大的优势在于，在异步执行的过程中，执行代码和处理结果的代码是明确分离的。

　　分类：

　　技术要点：

　　相关文章：