Web浏览器中动态添加修改HTML页面代码的问题分析

来源：互联网发布：linux 修改用户字符集编辑：程序博客网时间：2024/05/19 05:34

引言：在Web的世界里，浏览器加载页面，展示给用户最终的内容，可是最终展示的HTML代码与服务器上存储的代码一致吗？

1. xpath为什么不能正常工作？

　XPath是用来快速定位页面元素的方式和方法，忽然有一天，发现在页面中截取的XPath在代码的匹配中是无法工作的，那问题出在哪里呢？

　页面地址：http://www.66ip.cn/

截取匹配页面中的IP地址，基于Chrome浏览器自带的开发者工具，我们截取到某一个匹配的XPath路径为：

//*[@id="main"]/div/div[1]/table/tbody/tr[2]

　接下来，需要在代码中使用该xpath来匹配这个路径内容：

from lxml import etreefrom randomurl = "http://www.66ip.cn"pattern = '//*[@id="main"]/div/div[1]/table/tbody/tr'r = requests.get(url)tree = etree.HTML(r.text)nodes = tree.xpath(pattern)print("node length: %s" % len(nodes))

期望应该可以匹配出实际的tr元素个数的，但是实际的情况是nodes的长度为０，　那问题出在哪里呢？

2. 问题分析

　首先怀疑是否是XPath有问题，仔细检查了一边提取过程，没有问题。

　难道读取的页面内容和实际在浏览器中看到的内容不一致吗，网站是否有做其他的处理？　按照这个思路，提取了一下响应的内容：

　提取响应对象中的text属性，r.text中的内容，查看其中的内容，发现其中是有期望匹配的内容的，但是为什么不能匹配成功呢？

　可能的答案只有２个：　要么xpath有问题，要么响应的文件与浏览器中的内容不一致？

　xpath的提取是由浏览器自身来提取的，所以应该没有问题，那只能是浏览器中看到的内容与实际在代码中响应的内容不一致，那就对比一下内容吧，对比一下有了发现：

　在浏览器中的页面片段：

<table width="100%" border="2px" cellspacing="0px" bordercolor="#6699ff">    <tbody><tr><td>ip</td><td>端口号</td><td>代理位置</td><td>代理类型</td><td>验证时间</td></tr>    .....    </tbody>  </table>

　在代码中实际获取的代码片段如下：　

<table width="100%" border="2px" cellspacing="0px" bordercolor="#6699ff">    <tr><td>ip</td><td>端口号</td><td>代理位置</td><td>代理类型</td><td>验证时间</td></tr>　......</table>

不同之处是<tbody>在实际的代码中是不存在，只是在浏览器展示的过程中，浏览器自行添加上去的，结果导致提取的XPath路径与实际的代码无法匹配，最终无法获取到正确的匹配结果。　　　

３．问题解决

　　修改xpath的路径，将tbody移除掉之后，重新执行代码即可正确内容了。

４. 延展分析

　为了简化这个问题，做另一个简单的HTML页面，在浏览器上查看起显示的代码：

　编辑器中的HMTL代码：

<html>   <head>     <title>hell world</title>   </head>   <body>      <table>          <tr>             <td>who like it</td><td>No one really Care.</td>             <td>Sky Net</td><td>helloworld</td>          </tr>          <tfoot>abce</tfoot>      </table>   </body></html>

　　浏览器中的显示效果：

　　可以看到在浏览器中，自行添加了tbody的子标签，包装tr的内容；tfoot的内容跑到了上面去了，而tfoot的内容为空。是不是非常的诡异呀？

　　上述代码在Firefox/Chrome中测试过，情况相同，应该是浏览器执行的处理标准。

５．总结

　　浏览器为了更好的展示来自服务器的HMTL代码，自行做了相应的调整，在进行页面的代码分析之时，需要注意某些标签其实是浏览器在解析执行代码之时，自行添加上取的，不是实际的页面内容。

1 0