iframe常见问题详解

ifream内联框架

基础内容
iframe标签正常src引入网站即可

ifream标签

// A code block
var foo = 'bar';

//<iframe> 和 </iframe>
<iframe src="../index.html"></iframe>

iframe中可以设置些什么属性

frameborder:是否显示边框1或0
height width(css样式)

//display all html
<iframe width="100%" height="100%" src="../index.html" frameborder="0" scrolling="yes"></iframe>

scrolling:框架的是否滚动。yes,no,auto。

<iframe src="../index.html" frameborder="0" scrolling="yes"></iframe>

src：(也可以是图片)
name:框架的名称，window.frames[name]时专用的属性。
（最下面会详解window.frames用法）

玩转iframe之同域/跨域问题

如何理解，举个例子我们通过相对位置src链接的另一个页面我们可以通过此链接页更改被链接页内容，而我们通过在线网址链接的不能改网页内容，前者是同域后者是跨域（页面跳转互不影响）

获取iframe内容

iframe.contentWindow, 获取iframe的window对象
iframe.contentDocument, 获取iframe的document对象
（以前发布章节有window对象和document对象区别）
两者都是通过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的documentconsole.log("html",idoc.documentElement);//获取iframe的htmlconsole.log("head",idoc.head);  //获取headconsole.log("body",idoc.body);  //获取body

 用name方式获取

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="no"><p>hello world</p>
</iframe>
<script type="text/javascript">console.log(window.frames['ifr1'].window);console.dir(document.getElementById("ifr1").contentWindow);
</script>

   <iframe src ="../index.html" id="ifr1" name="ifr1" scrolling="yes"><p>hello</p></iframe><script type="text/javascript">console.log(window.frames['ifr1'].window);//就是window对象console.dir(document.getElementById("ifr1").contentDocument);</script>

自适应iframe

去滚动条scrolling=“no”
设置iframe的高为body的高

<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>

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常见问题详解相关推荐

Tomcat环境搭建与常见问题详解
Tomcat环境搭建和常见问题详解 Tomcat介绍环境搭建流程配置Java 注意事项下载Java 安装Java 配置环境变量测试Java 配置Tomcat 下载Tomcat 安装Tomcat ...
android小气泡提示,小气泡六大常见问题详解！
原标题:小气泡六大常见问题详解! 1.小气泡肌肤深层清洗多久做一次?常常清洗会不会对肌肤让肌肤变薄? 答:人体肌肤角质在17日-28日的周期会主动坠落,跟着年纪的增长会留在肌肤上,是肌肤昏暗的因素,因 ...
C语言中的字符串转数字函数常见问题详解
目录 C语言中的字符串转数字函数常见问题详解字符串转整形 atoi函数字符串转长整形 strtol函数, C语言中的字符串转数字函数常见问题详解字符串转整形 atoi函数函数原型: int a ...
iframe参数详解
iframe参数详解 <iframe src="you page's url" width="100″ height="30″ frameborder=& ...
Redis环境搭建以及常见问题详解
Redis环境搭建以及常见问题详解环境的搭建 Redis是什么??? Redis起源 Redis 简介 Redis优势 Redis与其他key-value存储数据库的区别 Redis 下载和安装 R ...
飞畅科技 POE供电交换机常见问题详解
POE交换机通过网线供电的方式为标准的POE终端设备供电,可以免去额外的电源布线,在为一些基于IP的终端(如IP电话机.无线局域网接入点AP.网络摄像机等)传输数据信号的同时,还能为此类设备提供直流供 ...
【计算机网络面试高频】-TCP协议常见问题详解，TCP数据报组成部分详解
3.TCP协议详解有关问题首先,需要知道,我们程序的数据首先会打到TCP的Segment中,然后TCP的Segment会打到IP的Packet中,然后再打到以太网Ethernet的Frame中,传到 ...
【机器学习】机器学习基础知识常见问题详解！
作者:胡联粤,Datawhale面经小组 Q1 ⽼板给了你⼀个关于癌症检测的数据集,你构建了⼆分类器然后计算了准确率为 98%, 你是否对这个模型满意?为什么?如果还不算理想,接下来该怎么做? 首先模 ...
iframe标签详解
在我们的页面中可能会需要用到,点击链接页面的某一块变成其他的页面,这时候iframe的作用就显现出来了. iframe 元素会创建包含另外一个文档的内联框架(即行内框架),这里所说的内联框架指的就是达 ...