Understanding iframe

A. Iframe is and what role

iframe is embedded framework of html tag, or an inline element, iframe element creates an inline frame that contains another document (that is, within the framework of the line). To put it plainly, iframe embedded in a page to other pages.

Usually we use iframe src direct nested iframe tag specified directly in the page on it.

<iframe src="demo_iframe_sandbox.htm"></iframe>

 

Two. Iframe advantages and disadvantages

advantage:

1. The procedures for the separation pages and virtually impervious to outside influence any js or css, easy to use

2. iframe page by nesting general, improve code reuse, such as copyright information and bottom head style page

3. reload the page, iframe content does not need to reload the page frame, increase page reload speed.

4. iframe can solve the problem of slow loading third-party content.

 

Disadvantages:

1. will have a lot of pages, not easy to manage

2. iframe content can not be captured framework of the search engines, so the iframe does not apply to home

3. iframe poor compatibility

4. iframe there is a certain security risk

5. iframe Onload event will clog the main page

 

III. The difference between the frame and iframe

1. frame can not be used alone departing frameSet, iframe can

2. frame can not be placed in the body, iframe can

3. In a nested iframe frameSet must be placed in the body

4. frame only through the height control frameSet; iframe can control their own, can not be controlled frameSet

5. iframe may be used in the table, frame versa

6. HTML5 support iframe, does not support the frame

7. frame almost abandoned, iframe Hale

8. frame and iframe realize the function is basically the same, but the iframe more flexible. Frame is a frame of the entire page, iframe is embedded page elements

Four .iframe can also set what property

iframe common attributes: 
1.frameborder: whether a border,. 1 (Yes), 0 (NO) 
2.height: the height of the frame as a common element, it is recommended to use the provided css. 
3.width: a frame as a normal width of the element, css recommended settings. 
4.name: name of the frame, the special time window.frames [name] attribute. 
5.scrolling: whether scroll frame. yes, no, auto. 
6.src: address, within the framework of, can make the page address, the address can also be a picture. 
7.srcdoc, used to replace the original contents of the HTML body inside. But IE does not support, but also no egg with 
8.sandbox: iframe be a series of restrictions, IE10 + support

 

V. same domain and cross-domain

We usually use the most basic characteristics of the iframe, iframe content is free to operate and the parent frame (DOM). However, provided that the same domain. If a cross-domain at best can only achieve page jump window.location.href.

So what is the same field / cross-domain what is it? Is to determine whether your url header as

With different domains domain question:

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里的内容

主要的两个API就是contentWindow,和contentDocument
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

 

另外更简单的方式是，结合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中获取父级内容

同理，在同域下，父页面可以获取子iframe的内容，那么子iframe同样也能操作父页面内容。在iframe中，可以通过在window上挂载的几个API进行获取.

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

 

八. iframe属性分析
1 align (HTML5 不支持。HTML 4.01 已废弃。)

规定 <iframe> 相对于周围元素的对齐方式, 属性值有 top, right, bottom, left, middle

<iframe align = "top"> </iframe>

 

2 frameborder (HTML5不支持)

规定是否显示 <iframe> 周围的边框.

<iframe frameborder = "0"></iframe>     //不显示边框

<iframe frameborder = "1"></iframe>     //显示边框

 

3 marginheight (HTML5 不支持)

规定 <iframe> 的顶部和底部的边距。其实可以理解为iframe的上下内边距, 并且这个属性不会增加iframe的高度, 超出默认显示滚动条

<iframe marginheight="10"></iframe>

 

4 marginwidth(HTML5 不支持)

同上, iframe左右内边距, 不影响宽度, 超出显示滚动条

 

5 scrolling(HTML5 不支持)

是否显示滚动条

<iframe scrolling="auto"></iframe>     //默认值, 内容超出显示

<iframe scrolling="yes"></iframe>      //始终显示

<iframe scrolling="no"></iframe>       //始终不显示

 

6 width height(HTML5支持)

<iframe>的宽高, 属性值可以是固定值, 也可以是百分比(父类容器百分比)

<iframe width = "100%" height = "200"></iframe>

 

7 name (HTML5支持)

规定 <iframe> 的名称。

在 XHTML 中，name 属性已废弃，并将被移除。使用 id 属性代替。

<iframe name="helloworld"></iframe>

 

8 src (HTML5支持)

iframe显示的内容地址

<iframe src="www.baidu.com"></iframe>

 

9 sandbox(HTML5新特性)

额外的限制, HTML 5通过sandbox属性提升<iframe>的安全性。sandbox属性可以防止不信任的Web页面执行某些操作。sandbox它可以防止如下操作

访问父页面的DOM（从技术角度来说，这是因为相对于父页面iframe已经成为不同的源了）

执行脚本

通过脚本嵌入自己的表单或是操纵表单

对cookie、本地存储或本地SQL数据库的读写

 

<iframe sandbox = ""></iframe>      //属性值空字符串 限制上述所有操作

<iframe sandbox = "allow-forms"></iframe>     //允许表单提交

<iframe sandbox = "allow-scripts"></iframe>     //允许脚本执行

<iframe sandbox = "allow-same-origin"></iframe>     //允许将内容作为普通来源对待。如果未使用该关键字，嵌入的内容将被视为一个独立的源。

<iframe sandbox = "allow-top-navigation"></iframe>     //嵌入页面的上下文可以导航（加载）内容到顶级的浏览上下文环境（browsing context). 如果未使用该关键字，这个操作不可用。

 

 

九.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;

另外,还可以添加其它的装饰属性:

属性	效果
allowtransparency	true or false 是否允许iframe设置为透明，默认为false
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>

你可以直接写在内联里面，也可以在css里面定义，不过对于广告iframe来说，样式写在属性中，是best pratice.