iframe的优缺点、使用

1、iframe的优缺点有哪些

iframe是HTML中的一个标签，可以在网页中嵌入另一个独立的HTML文档。它的优缺点如下：

　优点：　　

       1.代码模块化：使用iframe可以将一个网页划分为多个模块，每个模块单独编写HTML文档，使代码更加模块化和易于维护。

　　2.跨域通信：由于浏览器的同源策略，一个网页无法直接访问另一个域名下的内容。但是，使用iframe可以在同一个页面中加载不同域名下的内容，从而实现跨域通信。

独立性：iframe中的文档是独立的，它的样式和JavaScript代码不会影响到外层文档的样式和JavaScript代码。

　　缺点：

　　1. 降低性能：每个iframe都需要单独加载和渲染，这会导致网页的加载速度变慢，降低性能。iframe会阻塞主页面的Onload事件

　　2. SEO问题：iframe中的内容不会被搜索引擎抓取和索引，这会对网页的SEO产生影响。

　　3. 安全问题：iframe中的文档可以在外层文档中执行脚本，这可能导致安全问题。

       4. 很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。

       5. 浏览器的后退按钮无效（只能针对实现当前光标所在页面的前进与后退，无法实现frameset整个页面的前进与后退）

2. iframe的一些属性

.frameborder:是否显示边框，1(yes),0(no)
.height:框架作为一个普通元素的高度，建议在使用css设置。
width:框架作为一个普通元素的宽度，建议使用css设置。
name:框架的名称，window.frames[name]时专用的属性。
.scrolling:框架的是否滚动。yes,no,auto。
.src：内框架的地址，可以使页面地址，也可以是图片的地址。

3. postmessage

该方法挂载到window对象上，即使用window.postmessage()调用,

接受两个数:postMessage(message, targetOrigin):
message: string, 传对象需要JSON.stringify

targetOrigin: 接受你传递消息的域名，可以设置绝对路径，也可以设置"“或者”/"。 表示任意域名都行，"/"表示只能传递给同域域名。

发送消息: 使用postmessage方法
接受消息: 监听message事件

<iframe src="http://tuhao.com" name="sendMessage"></iframe>
//当前脚本
let ifr = window.frames['sendMessage'];
   //使用iframe的window向iframe发送message。
ifr.postmessage('give u a message', "http://tuhao.com");
//tuhao.com的脚本
window.addEventListener('message', receiver, false);
function receiver(e) {
    if (e.origin == 'http://tuhao.com') {
        if (e.data == 'give u a message') {
            e.source.postMessage('received', e.origin);  //向原网页返回信息
        } else {
            alert(e.data);
        }
    }
}

4. 获取iframe里的内容

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow; //获取iframe的window对象
var idoc = iwindow.document; //获取iframe的document

console.log("html",idoc.documentElement);//获取iframe的html
console.log("head",idoc.head); //获取head
console.log("body",idoc.body); //获取body

结合Name属性，通过window提供的frames获取.

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
   <p>Your browser does not support iframes.</p>
</iframe>

<script type="text/javascript">
console.log(window.frames['ifr1'].window);
console.dir(document.getElementById("ifr1").contentWindow);
</script>

在iframe中获取父级内容
window.parent 获取上一级的window对象，如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象，即，就是你打开页面的文档
window.self 返回自身window的引用。可以理解 window===window.self