HTML5 iFrame
<p> </p><h2>定义和用法</h2>
<p>iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。</p>
<h2>提示和注释：</h2>
<p class="tip">提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。</p>
<div>
<h2>属性</h2>
<p class="html5_new_note">new : HTML5 中的新属性。</p>
<table class="dataintable">
<tbody>
<tr><th>属性</th><th>值</th><th>描述</th></tr>
<tr>
<td>align</td>
<td>
<ul>
<li>left</li>
<li>right</li>
<li>top</li>
<li>middle</li>
<li>bottom</li>
</ul>
</td>
<td>
<p><span class="deprecated">不赞成使用。请使用样式代替。</span></p>
<p>规定如何根据周围的元素来对齐此框架。</p>
</td>
</tr>
<tr>
<td>frameborder</td>
<td>
<ul>
<li>1</li>
<li>0</li>
</ul>
</td>
<td>规定是否显示框架周围的边框。</td>
</tr>
<tr>
<td>height</td>
<td>
<ul>
<li><em>pixels</em></li>
<li><em>%</em></li>
</ul>
</td>
<td>规定 iframe 的高度。</td>
</tr>
<tr>
<td>longdesc</td>
<td><em>URL</em></td>
<td>规定一个页面，该页面包含了有关 iframe 的较长描述。</td>
</tr>
<tr>
<td>marginheight</td>
<td><em>pixels</em></td>
<td>定义 iframe 的顶部和底部的边距。</td>
</tr>
<tr>
<td>marginwidth</td>
<td><em>pixels</em></td>
<td>定义 iframe 的左侧和右侧的边距。</td>
</tr>
<tr>
<td>name</td>
<td><em>frame_name</em></td>
<td>规定 iframe 的名称。</td>
</tr>
<tr>
<td class="html5_new">sandbox</td>
<td>
<ul>
<li>""</li>
<li>allow-forms</li>
<li>allow-same-origin</li>
<li>allow-scripts</li>
<li>allow-top-navigation</li>
</ul>
</td>
<td>启用一系列对 <iframe> 中内容的额外限制。</td>
</tr>
<tr>
<td>scrolling</td>
<td>
<ul>
<li>yes</li>
<li>no</li>
<li>auto</li>
</ul>
</td>
<td>规定是否在 iframe 中显示滚动条。</td>
</tr>
<tr>
<td class="html5_new">seamless</td>
<td>seamless</td>
<td>规定 <iframe> 看上去像是包含文档的一部分。</td>
</tr>
<tr>
<td>src</td>
<td><em>URL</em></td>
<td>规定在 iframe 中显示的文档的 URL。</td>
</tr>
<tr>
<td class="html5_new">srcdoc</td>
<td><em>HTML_code</em></td>
<td>规定在 <iframe> 中显示的页面的 HTML 内容。</td>
</tr>
<tr>
<td>width</td>
<td>
<ul>
<li><em>pixels</em></li>
<li><em>%</em></li>
</ul>
</td>
<td>定义 iframe 的宽度。</td>
</tr>
</tbody>
</table>
<p> </p>
<p>关于怎样在父HTML里面操作iFrame。</p>
<p>比如：</p>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"> <br><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"><br></script><br><script></p>
<p></script><br></head><br><body></p>
<p><input type='text' class='test'></input><br> <iframe id="iframe" name="button-skin" src="/pages/console/system_report.html" ></iframe><br></body><br></html></p>
<p>system_report.html</p>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"> <br><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"><br></script><br><script></p>
<p></script><br></head><br><body><br><button class='button'>测试</button><br></body><br></html></p>
<p>其中src里面又是一个HTML，那么 改变html的 属性呢。</p>
<pre>$(window.frames['button-skin'].document).find('body')，这样是得到整个嵌套的html的 body。</pre>
<pre>$(window.frames['button-skin'].document).find('.button')这样可以操作button<br>但是一定要注意的是iframe里的html也有可能会加载延迟，这样的话就会得到</pre>
<pre>window.frames['button-skin']=undefined的错误。<br>怎样通过iframe里的属性改变父html的属性<br>$(window.parent.document).find（....）各种各样的操作。</pre>
<pre>$(window.parent.document).find（'.class'）.....</pre>
</div><br><br>
来源：https://www.cnblogs.com/echo777/p/11068306.html
頁:
[1]