iframe使用记录

入坑

最近在调试一个前段页面：网页内嵌html模板来动态生成数据

直接div包装页面

其实直接用div来包装模板页面也是可以的，而且操作简单。但是～～里面的图片格式用的是绝对定位。
想到了两种解决方案：

• 把图片改为相对定位，不影响原页面样式；
• 使用iframe嵌套为子页面。

iframe嵌套子页面

更改图片元素属性感觉不好调，没有试验，直接用iframe嵌套了一个子页面，发现展示效果不错，然后就是iframe的dom操作了。

iframe的dom操作

一开始想当然像普通元素操作iframe元素，发现怎么也获取不到iframe嵌套页面的元素。
然后各种百度，找到了一大堆操作：

js 操作

//获取iframe标签
var iframe_name = document.getElementById("iframe_name"); 
//获取子页面window对象
var iframe_window = iframe.contentWindow;
//获取子页面dom对象
var iframe_document = iframe_window.document;

//给页面绑定事件；
iframe_window.onscroll = frameScroll();
function frameScroll() {
    alert("11111");
}

绑定数据

我们加载好子网页模板，获取到网页的dom对象，似乎操作dom就很简单了吧，然而并不是这样，怎么打印log都获取不到里面的标签元素！滚动条事件也无法加载！这是问什么呢？原因iframe没有加载完文档就开始执行了，见代码：

iframe响应

if (iframe_name.attachEvent) {
   iframe_name.attachEvent("onload", function () {
       //iframe加载完成后你需要进行的操作  ie浏览器
       //定义滚轮事件
       iframe_name.contentWindow.onscroll = frameScroll();
       var interval = setInterval(function () {
         ajax_send(function (res) {
                if (res.status == 0) {
                    //console.log(res.status);
                } else {
                    console.log(res.status);
                    clearInterval(interval);
                }
            }, iframe_name);
        }, 1000); //每个1秒调用一次函数
   });
} else {
   iframe_name.onload = function () {
       //iframe加载完成后你需要进行的操作 非ie
       var iframe_document = iframe_name.contentWindow.document;
       //下面操作同上
   }
}

滚动条处理

有了上面的操作，基本的一些元素什么都可以操作了，不管你用js，还是jquery，随意。
我这边要操作的就是滚动条了：

• 根据页面内元素，定位元素对应的滚动条的位置；
• 同屏滚动

if (doc.documentElement.scrollTop == 0) {
	//非ie获取滚动距离
   doc.body.scrollTop = doc.body.scrollTop;
} else {
	//ie获取滚动距离
	doc.documentElement.scrollTop=doc.documentElement.scrollTop;
}

一些其它的想法

根据上面的提供的内容，大家可以根据自己的需要去构建自己的代码了。