iframe自适应高度
实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。 (需要只有iframe出现滚动条)
HTML:
<iframe src="http://www.deadnine.com" id="iframe" scrolling="no" frameborder="0"></iframe>
JS:
var ifm= document.getElementById("iframe");
ifm.height=document.documentElement.clientHeight;
这个方法可以达到让iframe自适应高度的效果,但是无法同步窗口放大或缩小,即调整页面大小之后,需要再次刷新。
为了让iframe随着页面大小变化自动变化,需要将iframe自适应高度的过程抽离出函数changeFrameHeight()。
HTML:
<iframe src="http://www.deadnine.com" id="iframe" scrolling="no" onload="changeFrameHeight()" frameborder="0"></iframe>
JS:
function changeFrameHeight(){
var ifm= document.getElementById("iframe");
ifm.height=document.documentElement.clientHeight;
}
window.onresize=function(){
changeFrameHeight();
}
iframe根据内容自定义高度
注意,这个自适应高度与上面的不同,上面的是让iframe根据页面高度自适应;这里是根据Iframe内文章内容设置iframe高度。
在页面加载完毕之后执行:
parent.document.getElementById("iframe").height=0;
parent.document.getElementById("iframe").height=document.body.scrollHeight;
iframe内链接连带父页面跳转
在链接里设置target="_parent"即可。
<a href="www.deadnine.com" target="_parent">老九</a>
target的使用方法为:
target="_blank": 提交后弹出新页面
target="_parent": 提交后C页面跳转
target="_top": 提交后A页面跳转
注:target不止适用于a标签,同样适用于form标签。
关于Iframe链接跳转的其他方法:
可以在head标签之间加入<base target="_parent" /> 子页面内的所有跳转默认是父页面一起跳。
如果要在js中跳转,window.location.href()是不能直接使用的,因为window这种跳转是没有target属性的,简单实现方法为让父页面跟着一起跳转,即在window.location.href=url后面加上window.parent.location.href=url; 如果需要登录之后再跳转回来,可以在url末尾添加get参数 "?preurl="+parent.location.href;
简单来说,iframe页面跳转包括以下几种情况:
"window.location.href"、"location.href"是本页面跳转
"parent.location.href"是上一层页面跳转
"top.location.href"是最外层的页面跳转
iframe页面刷新
parent,top,window的意义与上文中一致,如让父级页面刷新:parent.location.reload();‘’
也可以用子窗口的opener对象来获取父窗口:window.opener.document.location.reload();
子窗口刷新父窗口:self.opener.location.reload();
刷新另一个框架的页面:parent.另一FrameID.location.reload();
注:也可以使用window.location.href = window.location.href 来刷新本页面。与reload()的区别在于前者只刷新链接,后者之前提交的请求也一起提交。