前端面试题：iframe详解

iframe 元素会创建包含另外一个文档的内联框架（即行内框架），简单来说就是把另一个文档用iframe给引进来

比如A页面引入B页面里的内容

A页面：

A页面：

iframe的一些基本属性：

• frameborder:是否显示边框，0(不显示)
• height:框架作为一个普通元素的高度，建议在使用css设置。
• width:框架作为一个普通元素的宽度，建议使用css设置。
• name:框架的名称，window.frames[name]时专用的属性。
• scrolling:框架的是否滚动。yes,no,auto。
• src：内框架的地址，可以使页面地址，也可以是图片的地址。
• srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
• sandbox: 对iframe进行一些列限制，IE10+支持

iframe 可以跨域吗？

可以，用document.domain解决

举例，网页a(http://www.easonwong.com)和网页b(http://script.easonwong.com)，两者都设置document.domain = 'easonwong.com'（这样浏览器就会认为它们处于同一个域下），然后网页a再创建iframe上网页b，就可以进行通信啦～！

网页a

document.domain = 'easonwong.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.easonwong.com';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
    let doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在这里操纵b.html
};

网页b

document.domain = 'easonwong.com';