开发笔记📐 发现👽 人物👮 趣闻💦
IFRAME实战集锦 自适应高度\匹配内容高度\页面刷新

IFRAME实战集锦 自适应高度\匹配内容高度\页面刷新
2018-06-23 19:54:54   点击:

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()的区别在于前者只刷新链接,后者之前提交的请求也一起提交。

iframe 自适应 前端

上一篇:Ckeditor配置代码高亮 CMS实现编辑器代码着色
下一篇:CSS修改placeholder颜色 单独设置placeholder的字体字距