《WEB前端黑客技术揭秘》基础知识（二）之深入理解iframe

深入理解iframe

iframe是内联框架。
写法：

<iframe id="corelframe" name="corelframe" src="/blank.html"></iframe>

常用属性：
　　1.frameborder:是否显示边框，yes,no。

　　2.height:框架作为一个普通元素的高度，建议在使用css设置。

　　3.width:框架作为一个普通元素的宽度，建议使用css设置。

　　4.name:框架的名称，window.frame[name]时专用的属性。

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

　　6.src：内框架的地址，可以使页面地址，也可以是图片的地址。

比较特别的iframe属性只用三个：frameborder,scrolling,src，所有的iframe几乎都要指定。典型的iframe元素一般是：

　<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>

　　<iframe id="mainIframe" name="mainIframe" src="blank.html" frameborder="0" scrolling="auto" ></iframe>

iframe的跨域
iframe内的html页面可以有两个来源，本域内的页面，外部引用的页面。我们知道，为了安全，js是不能访问其他页面的对象和方法的，除非两个页面同域。这是可以理解的，因为你不可能希望别人修改引用你的网站时还修改你的网站。

　　如果有两段代码如下：

 　　A:<iframe id="mainIframe" name="mainIframe" src="/main.html" frameborder="0" scrolling="auto" ></iframe>

　　 B:<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>

我们该如何取iframe和子页面？有以下方法代码：

　var mainIframe = document.getElementById("mainIframe");

　　var mainIframeW = window.frames["mainIframe"];

　　var mainDocument = mainIframeW.document;