前端之iframe详解

最新推荐文章于 2025-05-08 18:13:11 发布

今天也要加油ya

最新推荐文章于 2025-05-08 18:13:11 发布

阅读量866

点赞数

分类专栏： ifram 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_61597234/article/details/127753180

版权

ifram 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了iframe的常用属性，如frameborder、height、width、name、scrolling和src等，并强调了srcdoc和sandbox属性的现代浏览器支持情况。同时，详细阐述了如何通过contentWindow和contentDocument来访问iframe中的内容，包括获取window对象、document对象以及html、head和body等元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、常用属性

iframe常用属性:
1.frameborder:是否显示边框，1(yes),0(no)
2.height:框架作为一个普通元素的高度，建议在使用css设置。
3.width:框架作为一个普通元素的宽度，建议使用css设置。
4.name:框架的名称，window.frames[name]时专用的属性。
5.scrolling:框架的是否滚动。yes,no,auto。
6.src：内框架的地址，可以使页面地址，也可以是图片的地址。
7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
8.sandbox: 对iframe进行一些列限制，IE10+支持

二、获取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