iframe>元素会创建包含另外一个文档的内联框架（即行内框架）；
一、align 属性（不赞成）
align属性规定iframe相对于周围元素的水平和垂直对齐方式，因为iframe元素是行内元素，即不会在页面上插入新行，这意味着文本和其他元素可以围绕在其周围，所以align属性可以规定iframe相对于周围元素的对齐方式；
二、frameborder属性
frameborder属性规定是否显示iframe周围的边框，但出于实用性方面的原因，最好不用设置该属性，而使用CSS来设置边框,是否显示边框：1(yes),0(no)；
<iframe src ="/index.html" width="400" height="300" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
三、height 属性
规定 iframe 的高度；
<iframe src =
"
/index.html
"
width=
"
400px
"
height=
"
500px
"
>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
四、marginheight 属性
规定 iframe 的顶部和底部的空白边距，以像素计；
<iframe src =
"
/example/html/demo_iframe.html
"
marginheight=
"
50px
"
width
=
"
400px
"
height=
"
300px
"
>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
五、marginwidth 属性
规定 iframe 的左边和右边的空白边距，以像素计；
<iframe src =
"
/example/html/demo_iframe.html
"
marginwidth=
"
50px
"
width
=
"
400px
"
height=
"
300px
"
>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
六、name 属性
规定 iframe 的名称，iframe 元素的 name 属性用于在 JavaScript 中引用元素，或者作为链接的目标；
<iframe src=
"
/example/html/demo_iframe.html
"
name=
"
iframe_a
"
>
<p>Your browser does not support iframes.</p>
</iframe>
<a href=
"
http://www.w3school.com.cn
"
target=
"
iframe_a
"
>W3School.com.cn</a>
</body>
</html>
七、sandbox属性
如果被规定为空字符串（sandbox=""），sandbox 属性将会启用一系列对行内框架中内容的额外限制，sandbox 属性的值既可以是一个空字符串（应用所有的限制），也可以是空格分隔的预定义值列表（将移除特定的限制）；
""：应用以下所有的限制；
allow-same-origin：允许 iframe 内容被视为与包含文档有相同的来源；
allow-top-navigation：允许 iframe 内容从包含文档导航（加载）内容；
allow-forms：允许表单提交；
allow-scripts：允许脚本执行；
<!DOCTYPE html>
<iframe src="/demo/demo_iframe_sandbox.html" sandbox="">
<p>Your browser does not support iframes.</p>
</iframe>
<p>"获得日期和时间" 按钮会在行内框架中运行一段脚本。</p>
<p>由于 sandbox 属性被设置为空字符串 ("")，行内框架的内容不允许运行脚本。</p>
<p>如果向 sandbox 属性添加 "allow-scripts"，则允许运行 JavaScript。</p>
<p><b>注释：</b>IE 9 以及更早的版本不支持 sandbox 属性，Opera 12 以及更早的版本也不支持该属性。</p>
</body>
</html>
八、scrolling 属性
规定是否在 iframe 中显示滚动条，默认地，如果内容超出了 iframe，滚动条就会出现在 iframe 中；
auto：在需要的情况下出现滚动条（默认值）；
yes：始终显示滚动条（即使不需要）；
no：从不显示滚动条（即使需要）；
<h3>iframe 中始终显示滚动条：</h3>
<iframe src =
"
/index.html
"
width=
"
200
"
height=
"
200
"
scrolling=
"
yes
"
>
<p>Your browser does not support iframes.</p>
</iframe>
<h3>iframe 中从不显示滚动条：</h3>
<iframe src =
"
/index.html
"
width=
"
200
"
height=
"
200
"
scrolling=
"
no
"
>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
九、seamless 属性
属于逻辑属性，当设置该属性后，它规定了 <iframe> 看上去像是包含文档的一部分（无边框或滚动条）；
<!DOCTYPE html>
<p>这是一个段落。</p>
<iframe src="/demo/demo_iframe.html" seamless></iframe>
<p><b>注释：</b>Opera、Chrome 以及 Safari 支持 seamless 属性。</p>
</body>
</html>
十、src 属性
规定在 iframe 中显示的文档的 URL；
绝对 URL：指向其他站点（比如 src="
www.example.com/index.html
"）；
相对 URL：指向站点内的文件（比如 src="index.html"）；
<iframe src =
"
/index.html
"
>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
十一、srcdoc 属性
规定页面的 HTML 内容显示在行内框架中，该属性与 sandbox 和 seamless 属性一同使用，如果浏览器不支持 srcdoc 属性，则相应地会显示在 src 属性（若已设置）中规定的文件；
<!DOCTYPE html>
<iframe srcdoc="<p>Hello world!</p>" src="/demo/demo_iframe_srcdoc.html">
<p>Your browser does not support iframes.</p>
</iframe>
<p><b>注释：</b>所有主流浏览器都支持 srcdoc 属性，除了 Internet Explorer。</p>
</body>
</html>
十二、width 属性
规定 iframe 的宽度；
<iframe src =
"
/index.html
"
width=
"
400px
"
height=
"
300px
"
>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
十三、iframe的基本特性
通常使用Iframe最基本的特性，就是能自由操作iframe和父框架的内容（DOM），但前提条件是同域，如果跨域顶多只能实现页面跳转window.location.href；
A:<iframe id="mainIframe" name="mainIframe" src="/main.html" frameborder="0" scrolling="auto" ></iframe>
B:<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>
使用A时，因为同域，父页面可以对子页面进行改写,反之亦然；
使用B时，不同域，父页面没有权限改动子页面,但可以实现页面的跳转；
十四、获取iframe里的内容
iframe.contentWindow：获取iframe的window对象；
iframe.contentDocument：获取iframe的document对象；
这两个API只是DOM节点提供的方式(即getELement系列对象)
var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
console.log("window",iwindow);//获取iframe的window对象
console.log("document",idoc); //获取iframe的document
console.log("html",idoc.documentElement);//获取iframe的html
console.log("head",idoc.head); //获取head
console.log("body",idoc.body); //获取body
<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中获取父级内容
在同域下，子iframe同样也能操作父页面内容，在iframe中，可以通过在window上挂载的几个API进行获取；
window.parent：获取上一级的window对象，如果还是iframe则是该iframe的window对象；
window.top：获取最顶级容器的window对象，即打开页面的文档；
window.self：返回自身window的引用，可以理解为window===window.self；
十六、iframe的轮询
之前的网页可以使用iframe实现异步发送请求；
ajax的长轮询是在ajax的readyState=4时再次执行原函数，这里使用iframe也是一样，异步创建iframe，然后reload，和后台协商好，看后台返回的信息放在哪，然后获取里面的信息即可，这里是直接放在body里；
var iframeCon = docuemnt.querySelector('#container'),text; //传递的信息
var iframe = document.createElement('iframe'),
iframe.id = "frame",
iframe.style = ";",
iframe.name="polling",
iframe.src="target.html";
iframeCon.appendChild(iframe);
iframe.onload= function(){
var iloc = iframe.contentWindow.location,
idoc = iframe.contentDocument;
setTimeout(function(){
text = idoc.getElementsByTagName('body')[0].textContent;
console.log(text);
iloc.reload(); //刷新页面,再次获取信息，并且会触发onload函数
},2000);
十七、自适应iframe之蜜汁广告
通常使用iframe在页面引入广告，因为广告一般是与页面内容不相关的，如果使用div在页面中嵌套，会造成网页内容的紊乱，而且这样势必需要引入额外的css和js，极大的降低了网页的安全性，因此需要使用iframe来插入广告，我们可以将iframe理解为一个沙盒，里面的内容能够被top window完全控制，而且主页的css样式是不会入侵iframe里面的样式，这些都给iframe的广告命运埋下伏笔，默认情况下，iframe是不适合做展示信息的，需要对其进行decorate；
自适应iframe
第一步：默认情况下，iframe会自带滚动条，不会全屏，如果想自适应iframe，需要去掉滚动条；
<iframe src="./iframe1.html" id="iframe1" scrolling="no"></iframe>
第二步：设置iframe的高为body的高；
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;
此外，还可以添加其他的装饰属性：
1）allowtransparency：true or false，是否允许iframe设置为透明，默认为false；
2）allowfullscreen：true or false，是否允许iframe全屏，默认为false；
<iframe id="google_ads_frame2" name="google_ads_frame2" width="160" height="600" frameborder="0" src="target.html" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>
十八、iframe安全性探索
iframe出现安全性有两个方面，一是你的网页被别人iframe；二是你iframe别人的网页；当你的网页被别人iframe时，可能容易被钓鱼网站利用，为了防止页面被一些不法分子利用，我们需要做好安全性措施；
防嵌套网页
比如clickhacking就是使用iframe来拦截click事件，因为iframe享受着click的最优先权，当有人在伪造的主页中进行点击的话，如果点在iframe上，则会默认是在操作iframe的页面，所以钓鱼网站就是使用这个技术，通过诱导用户进行点击，比如设计一个“妹妹寂寞了”等之类的网页，诱导用户点击，但实际结果，看到的不是“妹妹”，而是被恶意微博吸粉，所以为了防止网站被钓鱼，可以使用window.top来防止网页被iframe；
if(window != window.top){
window.top.location.href = correctURL;
这段代码的主要用途是限定你的网页不能嵌套在任意网页内。如果你想引用同域的框架的话，可以判断域名。
// 如果想引用同域的框架的话，可以判断域名，如果不同域的话，上述内容会报错
if (top.location.host != window.location.host) {
top.location.href = window.location.href;
所以，这里可以使用try...catch...进行错误捕获。如果发生错误，则说明不同域，表示你的页面被盗用了。可能有些浏览器这样写是不会报错，所以需要降级处理。
这时候再进行跳转即可.
// 使用try...catch...进行错误捕获，如果发生错误，则说明不同域，表示页面被盗用了
try{
top.location.hostname; //检测是否出错
//如果没有出错，则降级处理
if (top.location.hostname != window.location.hostname) {
top.location.href =window.location.href;
} catch(e){
top.location.href = window.location.href;
X-Frame-Options
X-Frame-Options是一个相应头，主要是描述服务器的网页资源的iframe权限，其实就是将前端js对iframe的把控权交给服务器来进行处理：
X-Frame-Options: DENY：拒绝任何iframe的嵌套请求；
X-Frame-Options: SAMEORIGIN：只允许同源请求，例如网页为 foo.com/123.php，則 foo.com 底下的所有网页可以嵌入此网页，但是 foo.com 以外的网页不能嵌入；
X-Frame-Options: ALLOW-FROM http://s3131212.com：只允许指定网页的iframe请求，不过兼容性较差，Chrome不支持；
//js
if(window != window.top){
window.top.location.href = window.location.href;
} //等价于
X-Frame-Options: DENY //js
if (top.location.hostname != window.location.hostname) {
top.location.href =window.location.href;
} //等价于
X-Frame-Options: SAMEORIGIN</pre>
X-Frame-Options属性是对页面的iframe进行的一个主要限制，不过涉及iframe的header可不止这一个，另外还有一个Content Security Policy，他同样也可以对iframe进行限制，而且他应该是未来网页安全防护的主流；
CSP之页面防护
和X-Frames-Options一样，都需要在服务端设置好相关的Header，CSP能够极大的防止页面被XSS攻击，而且可以制定js，css，img等相关资源的origin，防止被恶意注入，不过兼容性不好；
使用主要是在后端服务器上配置，在前端可以观察Response Header里是否有这样一个Header：
Content-Security-Policy: default-src 'self'
通常我们可以在CSP后配置各种指定资源路径，有
default-src,
script-src,
style-src,
img-src,
connect-src,
font-src,
object-src,
media-src,
sandbox,
child-src,
如果未指定的话，会默认使用default-src规定的加载策略，默认配置就是同域： default-src "self"；这里还和iframe有一点瓜葛的就是child-src 和 sandbox，child-src就是用来指定iframe的有效加载路径，其实和X-Frame-Options中配置allow-origin是一个道理，不过allow-origin没有得到厂商的支持，而sandbox其实就和iframe的sandbox属性是一样的，他可以规定来源能够带有什么权限；
Content-Security-Policy: child-src 'self' http:
