A.インラインフレームであり、どのような役割
IFRAMEは（それはラインの枠組みの中で、ある）iframe要素が別の文書を含むインラインフレームを作成し、埋め込まれたHTMLタグのフレームワーク、またはインライン要素である。端的に言えば、他のページにページに埋め込まれたIFRAME。
通常、我々はそれにページに直接指定のiframe SRC直接ネストされたiframeタグを使用します。
<IFRAME SRC = "demo_iframe_sandbox.htm"> </ iframe>の
二つ。インラインフレームの利点と欠点
利点：
1.事実上、任意のJSやCSS外部からの影響を通さない使いやすい分離ページの手順と
一般ネスト2. iframeのページは、そのような著作権情報及び底部ヘッドスタイルページとして、コードの再利用性を向上
3.ページをリロードし、iframeの内容は、ページのリロード速度を上げる、ページフレームをリロードする必要はありません。
4. IFRAMEは遅い読み込み、サードパーティのコンテンツの問題を解決することができます。
短所：
1.は管理が容易ではない、ページの多くを持っています
2. iframeのコンテンツは、検索エンジンの枠組みをキャプチャすることができないので、IFRAMEは家には適用されません。
3. iframeの貧しい人々の互換性
4. iframeの特定のセキュリティリスクがあります
5. iframeのonloadイベントは、メインページを詰まらせます
III。フレームとiframeの差
1フレームは、フレームセット、IFRAME缶を逸脱単独で使用することができません
前記フレームは、本体と、IFRAME缶内に配置することができません
ネストされたiframeのフレームセット3.本体内に配置されなければなりません
唯一の高さ制御フレームセットを介して4フレーム、IFRAMEが自分を制御することができるが、フレームセットを制御することができません
5. IFRAMEフレームその逆、テーブルに使用することができます
6. HTML5のサポートはiframe、フレームをサポートしていません。
ほとんど放棄さ7.フレーム、インラインフレームヘイル
8.フレームとiframe関数は基本的に同じであるが、IFRAMEをより柔軟に実現することができる。フレームは、ページ全体のフレームであり、IFRAMEがページ要素を埋め込まれています
四.iframeも何プロパティを設定することができます
IFRAME共通属性：
1.frameborder：ボーダーか,. 1（Yes）は、0（NO）
2.height共通要素として、フレームの高さは、それが設けられたCSSを使用することが推奨されます。
3.width：要素の通常の幅とフレーム、CSS推奨設定。
4.name：フレームの名前は、特別な時間は、[名前]属性をwindow.frames。
5.scrolling：スクロールフレームかどうか。はい、いいえ、オート。
6.src：アドレスは、ページアドレスを作ることができる、の枠組みの中で、アドレスも絵することができます。
7.srcdoc、内部のHTML本体の元の内容を置き換えるために使用されます。しかし、IEがサポートしていませんが、またして何の卵
8.sandbox：制約の一連のIFRAMEはならない、IE10 +のサポート
V.同じドメインとクロスドメイン
私たちは通常、iframeのコンテンツが動作するように自由と親フレーム（DOM）で、IFRAMEの最も基本的な特性を使用しています。しかし、同じドメインことを条件とする。クロスドメインはせいぜいページジャンプを実現することができる場合window.location.href。
だから何であるか同じフィールド/クロスドメインは？決定するために何があるかどうか、あなたのURLヘッダとして
異なるドメインのドメイン質問と：
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.