视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
iframe窗口高度自适应的实现方法_javascript技巧
2020-11-27 21:18:30 责编:小采
文档


domainA 中有一个页面index.html,通过iframe嵌套了domainB中的一个页面other.html
由于other.html页面在iframe中显示,而且其页面内容会动态的增加或减少,现在需要去掉iframe的滚动条
由于javascript同源策略的,无法进行跨域操作,使得问题比较棘手
参考了一下网上的做法,引入了一个代理页面,或者叫做中介 agent.html,属于domainA
然后,在domainB 中的other.html中,再使用iframe将agent.html进行嵌套

好了,现在情况是这样的:
index.html 使用iframe 嵌套 other.html
other.html 使用iframe 嵌套 agent.html
之所以要引入第3个页面agent.html,就是为了遵守“同源策略”的规则,完成不同domain下参数的传递!

我们最终的目的是要去掉滚动条,又要保证被嵌入的页面内容全部得到显示
1.取得other.html页面的实际高度height
2.将height设置到其嵌入的iframe的src属性上
3.在agent.html中截取出所属iframe的src属性中的height值

下面的例子中,使用了一个技巧,避免了使用setInterval()不断去设置iframe的高度
做法是在iframe的src上,附加一个时间戳,让浏览器每次都重新加载agent.html
进而让agent.hml中的js函数invokeMethodInTopWindow()得到执行
domainA 中的2个html
index.html

代码如下:
#{extends 'main.html' /}
#{set title:'Home' /}


窗口自适应---绕开同源策略的,同时又利用同源策略,去掉iframe的滚动条,动态调整窗口的高度,让其能够显示被嵌套页面的所有内容




function resize(height) {
//alert("resize");
document.getElementsByName("domainB")[0].height=height;
}

agent.html

代码如下:




Insert title here


我是代理页面哦!

window.onload = invokeMethodInTopWindow;
function invokeMethodInTopWindow() {
//alert("调用同域下的函数,重置iframe的高度");
var domainA = document.parentWindow;
var realHeight = domainA.location.hash.split("#")[1];
//last step:调用最上层窗口的函数,重置iframe的高度
parent.parent.resize(realHeight);

//alert("realHeight:"+realHeight);
//alert(document.parentWindow.name);//获取容器所在窗口的名称 domainA
//error://alert(document.parentWindow.parent.name); //访问失败 :不能访问domainB
//alert(document.parentWindow.parent.parent.name);//最顶层window属于domainA,因此可以访问
}
//使用不同的时间戳设置iframe的src属性后,就不用使用setInterval()
//setInterval("invokeMethodInTopWindow()",100);



domainB中的other.html

代码如下:




Insert title here




在JavaScript中,有一个很重要的安全性,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的,即JavaScript只能访问与包含它的文档在同一域下的内容。
所谓同源是指,域名,协议,端口相同。


比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,
他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。




//隐藏或显示div
function btnClick() {
var div = document.getElementsByTagName("div");
for(var i in div) {
if(i div[i].style.display = (div[i].style.display == 'none') ? "block" : "none";
}
}


function proxy(){
//alert("btn click");
//获取本页面的高度
var scrollHeight = document.documentElement.scrollHeight;
//alert("滚动条高度:"+scrollHeight);
//将窗口的高度先设置到属于domainA的iframe的src属性上
var iframeDomainA = document.getElementsByName("domainA")[0];
//用domainA的一个页面作为代理,最终的目的是解决“同源策略”的
var url = "http://localhost:9000/agent";
/**技巧:通过时间戳让浏览器每次重新加载iframe,这样每次都会自动设置被嵌套的iframe的高度,避免了使用setInterval()*/
iframeDomainA.src = url+ "? time=" + new Date().getTime() + "#" + scrollHeight ;
}

window.onload = proxy;



下载本文
显示全文
专题