iframe常见问题详解

ifream内联框架

1. 基础内容
   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的document
      console.log("html",idoc.documentElement);//获取iframe的html
      console.log("head",idoc.head);  //获取head
      console.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