iframe标签规定一个内联框架(即行内框架)。被用来在当前 HTML 文档中嵌入另一个文档。所有的主流浏览器都支持iframe标签。

1、常用属性:

属性描述
nameframe_name规定 iframe 的名称
srcURL规定在 iframe 中显示的文档的 URL。
widthpixels%规定 iframe 的宽度。
heightpixels%规定 iframe 的高度。
marginwidthpixels规定 iframe 的左侧和右侧的边距。
marginheightpixels规定 iframe 的顶部和底部的边距。
frameborder0/1规定是否显示框架周围的边框。
scrollingyes/no/auto规定是否在 iframe 中显示滚动条。

2、iframe的使用

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

例如:

<iframe id="myFrame" scrolling="no" frameborder="0" src=" " style="width:100%;height:100%"></iframe>

iframe的src属性指定本地的一个页面,交互部分写到这个页面中,iframe会自动传到引入的页面。

3、获取iframe中的内容

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

4、html iframe 子页面调用父页面的方法

子页面使用parent.method()调用父页面方法,例如:

父页面代码:

<body>
   <div id="default">div内容</div>
   <iframe src="child.html"></iframe>
</body>
<script>
    function test() {
        alert('Hello World!');
    }
</script>

子页面代码:

<body>
    <div>iframe子页面内容</div>
</body>
<script>
    $(function() {
        //在iframe子页面中查找父页面元素
        alert($('#default', window.parent.document).html());
        //在iframe中调用父页面中定义的变量
        alert(parent.value);
        //在iframe中调用父页面中定义的方法
        parent.test();
    });
</script>

5、iframe嵌套音乐播放器

使用``标签可以在网页中嵌入网易云音乐播放器。 代码如下:

<iframe frameborder="no" border="0" 
    marginwidth="0" marginheight="0" 
    width=350 height=90 
    src="https://music.163.com/outchain/player?type=2&id=423228325&auto=0&height=66">
</iframe>

参数解释:
id:歌曲id
auto:0/1
0表示打开网页的时候不自动播放;
1表示打开网页的时候自动播放。

效果如下:

6、iframe 的优缺点

  • 优点

    • 重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少数据的传输,减少网页的加载时间);
    • 技术简单,使用方便,主要应用于不需要搜索引擎来搜索的页面;
    • 方便开发,减少代码的重复率(比如页面的header,footer);
  • 缺点

    • 会产生很多的页面,不易于管理;
    • 不易打印;
    • 多框架的页面会增加服务气得http请求;
    • 浏览器的后退按钮无效等;
Last modification:February 28th, 2021 at 10:43 am
If you think my article is useful to you, please feel free to appreciate