IE、FF兼容 iframe 截取页面某坐标的内容

最新推荐文章于 2021-07-26 15:14:49 发布

nuptsv_ice

最新推荐文章于 2021-07-26 15:14:49 发布

阅读量884

点赞数

分类专栏：页面开发技巧 javascript 文章标签： iframe 取外站数据

javascript 同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

页面开发技巧

31 篇文章 0 订阅

订阅专栏

先来熟悉下，Iframe的一些属性：
1. marginheight 属性规定框架内容与框架的上方和下方之间的高度，以像素计。
2. maiginweidth 属性规定框架内容与框架的左侧和右侧之间的高度，以像素计。
3. vspace y方向显示的区域，负值为从目标网页最上面开始截取的部分，正值为y值+从上部开始内容区域
4. hsapce x方向显示的区域，负值为从目标网页左侧开始截图的部分，正值为x值+从左侧开始内如区域
5. src 目标网页的地址，可以为html，asp，文本等内如
6. frameborder 框架边框，0为无边框（画中画效果）
7. scrolling 是否显示滚动，yes显示
8. align：指定浮动窗口内的页面相对于浮动窗口的位置，它的值有left、right、top、middle、bottom
9. marginwidth、marginheight 目标网页被框架覆盖的深度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body οnlοad="f()">
<script type="text/javascript">
function f(){
var el = document.createElement("iframe");
el.setAttribute('id', 'ifrm');
document.body.appendChild(el);
el.setAttribute('src', 'http://www.XXX.com#aad');

        if (document.all){//IE
                el = document.frames["ifrm"].document;
        }else{//Firefox
                el = document.getElementById("ifrm").contentDocument;
        }

doc.getElementById("aad").style.color="blue";
}
</script>
</body>
</html>

找了很久的呀，单用<iframe src="http://www.XXX.com#aad/" width="200" height="500"> 这个代码，在FF里面是可以正常显示的，但是到了IE可就不对了，坐标完全没有定位到。（注：#aad为需要的div层的id=“aad”）

用iframe截取虽然可以实现需要的效果，但是浏览器还是会先把整个网页下载完成，然后才定位，网速慢的话，这一点就特别明显。

所以并不推荐使用iframe.