iframe可以将网站各页面的公共部分(如导航等)提出来单独做一个页面,减少了代码的冗余。
但说实话,我个人并不喜欢使用这个,因为这个在调整样式的时候会比较麻烦——当然,有可能是我水平太菜的问题。不过现在有很多系统还是使用iframe,前几天在做公司一个项目的时候也遇到了,在获取子框架值上花了不少时间,现在做个总结,也希望能为大家以后节省点时间。
iframe有两种情况。
第一种:在页面中直接使用一个iframe,如图。
页面中这么引入iframe
<iframe src="...." name="ifarme" id="iframe" width.....></iframe>
iframe页面中有如下代码
<form id="form1" name="form1" method="post" action="">
<input type="text" id="sonText" name="sonText" />
</form>
那么 从父级页面取iframe值
function getvalue()
{
alert(iframe.form1.sonText.value); //iframe名.表单名.控件名.value
//也可以根据控件id来取值
var text = window.iframe.document.getElementById('sonText').value; //iframe为iframe标签的name值
}
iframe获取父级页面的值与上边相似:
window.parent.document.getElementById('标签ID').value;
第二种:一个页面中有多个iframe,iframe之间互相取值,如图。
在iframe2中获取ifame1的值如下:
window.parent.frames['iframe1'].sonText.value;
//或
window.parent.frames['iframe1'].document.getElementById('sonText').value;