iframe怎么用-html教程-PHP中文网

首页

web前端

html教程

iframe怎么用

清浅

May 06, 2019 am 09:57 AM

iframe

iframe是一个内联框架，可以在当前HTML页面中嵌入另一个文档，一般情况下使用iframe直接在页面嵌套iframe标签再指定src就可以了。

iframe怎么用

有人说，iframe是能耗最高的一个元素，尽量减少使用。也有人说，iframe的安全性太差，尽量减少使用。虽然他们说的是真的，但是iframe的强大功能是不容忽视的，而且现在不乏公司正在使用它。

d5ba1642137c3f32f4f4493ae923989c标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

所有的主流浏览器都支持d5ba1642137c3f32f4f4493ae923989c标签。你可以把提示的文字放到 d5ba1642137c3f32f4f4493ae923989c 和 065276f04003e4622c4fe6b64f465b88里面，这样不支持 d5ba1642137c3f32f4f4493ae923989c的浏览器就会出现提示的文字。

iframe 如何使用呢？

通常我们使用iframe直接在页面嵌套iframe标签指定的src就可以了。

比如：

<!-- 
<iframe> 标签规定一个内联框架
这里写p 标签是为了看align的效果     -->
<p style="overflow: hidden;">这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。         <iframe name="myiframe" id="myrame" src="external_file.html" frameborder="0" align="left" width="200" height="200" scrolling="no">
<p>你的浏览器不支持iframe标签</p>
 </iframe>
这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。</p>

iframe 的常用属性：

name ：规定 d5ba1642137c3f32f4f4493ae923989c 的名称。
width：规定 d5ba1642137c3f32f4f4493ae923989c 的宽度。
height ：规定 d5ba1642137c3f32f4f4493ae923989c 的高度。
src：规定在 d5ba1642137c3f32f4f4493ae923989c 中显示的文档的 URL。
frameborder ：规定是否显示 d5ba1642137c3f32f4f4493ae923989c 周围的边框。 (0为无边框，1位有边框)。
align：规定如何根据周围的元素来对齐 d5ba1642137c3f32f4f4493ae923989c。　(left,right,top,middle,bottom)。
scrolling：规定是否在 d5ba1642137c3f32f4f4493ae923989c 中显示滚动条。 (yes,no,auto)

上面代码中 iframe的src属性为自己本地的一个html页面

代码如下：

<body>
    <div id="div" style="height: 300px; background: #ddd;">这是一个外部文件里面的内容</div></body><script>
    var div = document.getElementById("div");
    console.log(div);</script>

有什么交互的部分也是写到这个页面中，iframe会自动传到引入的页面的。

那如何获取iframe里面的内容呢？

var iframe = document.getElementById("myrame"); //获取iframe标签
    var iwindow = iframe.contentWindow; //获取iframe的window对象
    var idoc = iwindow.document; //获取iframe的document对象
    console.log(idoc.documentElement); //获取iframe的html
    console.log("body",idoc.body);

但是，这里面是获取不到里面的DOM的，可以在URL中获取（也就是引入的html文件）

iframe 的优缺点

优点：

重载页面时不需要重载整个页面，只需要重载页面中的一个框架页（减少数据的传输，减少网页的加载时间）；

技术简单，使用方便，主要应用于不需要搜索引擎来搜索的页面；

方便开发，减少代码的重复率（比如页面的header，footer）；

缺点：

会产生很多的页面，不易于管理；

不易打印；

多框架的页面会增加服务气得http请求；

浏览器的后退按钮无效等；

由于诸多的缺点，不符合标准网页设计的理念，已经被抛弃，目前的HTML5不再支持此标签。

以上是iframe怎么用的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。