iframe自动适应高度,iframe自适应窗口大小

iframe自动适应高度,iframe自适应窗口大小,iframe窗口高度自适应的实现方法

本文主要介绍高适应性iframe窗口的实现方法,有需要的朋友可以参考一下。

在domainA中有一个页面index.html,在domainB中有一个页面other.html通过iframe嵌套。因为other.html页面是在iframe中显示的,其页面内容会动态增减,所以现在需要去掉iframe的滚动条。由于javascript同源策略的限制,无法进行跨域操作。让问题变得更难,参考网上的做法,引入一个代理页面,或者中介agent.html,属于domainA。然后,在域b的other.html中,使用iframe嵌套agent.html。

好的,情况是这样的:index.html用iframe嵌套other.htmlother.html,用iframe嵌套agent.html。之所以引入第三页agent.html,是为了遵守“同源策略”的规则,完成不同域下的参数传递!

我们的最终目标是移除滚动条,并确保显示所有嵌入的页面内容。1.获取other.html页面的实际高度。2.将高度设置为其嵌入的iframe的src属性。3.在agent.html中截取其自身iframe的src属性中的高度值。

在下面的示例中,使用了一个技巧来避免使用setInterval()不断设置iframe的高度。方法是在iframe的src上附加一个时间戳,让浏览器每次都重新加载agent.hml,然后执行agent.hml中的js函数invokeMethodInTopWindow()。多迈纳的两个htmlindex.html

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

人力资源

div style=' color:red;Font-weight:bold '窗口适配——绕过同源策略的限制,同时使用同源策略,去掉iframe的滚动条,动态调整窗口的高度,使其能够显示嵌套的page /div的所有内容!-需要动态调整高度的iframe-div style=' text-align:center;'iframe name=' domain b ' src=' http://127 . 0 . 0 . 1:8088/other ' width=' 80% ' scrolling=' no ' frame border=' 0 '/iframe/div

script type='text/javascript '函数resize(height){//alert(' resize ');document . getelementsbyname(' domain b ')[0]。身高=身高;}/脚本

agent.html

复制代码如下:键入dochtmlhtmlhtmlheadmeta charset=' utf-8 ' title在此插入标题/title/headbody我是代理页面!script type=' text/JavaScript ' window . onload=invokeMethodInTopWindow;函数InvokeMethodToPwindow(){//alert('调用同域下的函数重置iframe的高度');var domain a=document . parent window;var real height=domain a . location . hash . split(' # ')[1];//最后一步:调用顶部窗口的函数重置iframe parent . parent . resize(real height)的高度;

//alert(' real height:' real height);//alert(document . parent window . name);//获取容器所在窗口的名称,domain a//ERROR://ALERT(document . parent window . parent . name);//访问失败:无法访问域b//警报(文档;父窗口;父母;父母;姓名);//最顶层的窗口属于domainA,所以可以访问}//设置了不同时间戳的iframe的src属性后,就不用使用setInterval()//setInterval(' InvokeMethodToPwindow()',100);/script/body/html

域名中的Other.html b

复制代码如下:DOCTYPE html htmlheadmeta charset=' UTF-8 ' title在此插入标题/title/headbody onclick='proxy()'!-按域嵌入的页面A-button type=' button ' onclick=' BTN click()'切换显示/按钮

Div=' display: none '在JavaScript中,有一个非常重要的安全限制,叫做“同源策略”。这个策略对JavaScript代码可以访问的页面内容做了一个重要的限制,即JavaScript只能访问与包含它的文档在同一个域中的内容。所谓同源,就是域名、协议、端口都一样。在JavaScript中,有一个非常重要的安全限制,叫做“同源策略”。这个策略对JavaScript代码可以访问的页面内容做了一个重要的限制,即JavaScript只能访问与包含它的文档在同一个域中的内容。所谓同源,就是域名、协议、端口都一样。在JavaScript中,有一个非常重要的安全限制,叫做“同源策略”。这个策略对JavaScript代码可以访问的页面内容做了一个重要的限制,即JavaScript只能访问与包含它的文档在同一个域中的内容。所谓同源,就是域名、协议、端口都一样。在JavaScript中,有一个非常重要的安全限制,叫做“同源策略”。这个策略对JavaScript代码可以访问的页面内容做了一个重要的限制,即JavaScript只能访问与包含它的文档在同一个域中的内容。所谓同源,就是域名、协议、端口都一样。在JavaScript中,有一个非常重要的安全限制,叫做“同源策略”。这个策略对JavaScript代码可以访问的页面内容做了一个重要的限制,即JavaScript只能访问与包含它的文档在同一个域中的内容。所谓同源,就是域名、协议、端口都一样。在JavaScript中,有一个非常重要的安全限制,叫做“同源策略”。这个策略对JavaScript代码可以访问的页面内容做了一个重要的限制,即JavaScript只能访问与包含它的文档在同一个域中的内容。所谓同源,就是域名、协议、端口都一样。在JavaScript中,有一个非常重要的安全限制,叫做“同源策略”。这个策略对JavaScript代码可以访问的页面内容做了一个重要的限制,即JavaScript只能访问与包含它的文档在同一个域中的内容。所谓同源,就是域名、协议、端口都一样。在JavaScript中,有一个非常重要的安全限制,叫做“同源策略”。这个策略对JavaScript代码可以访问的页面内容做了一个重要的限制,即JavaScript只能访问与包含它的文档在同一个域中的内容。所谓同源,就是域名、协议、端口都一样。在JavaScript中,有一个非常重要的安全限制,叫做“同源策略”。这个策略对JavaScript代码可以访问的页面内容做了一个重要的限制,即JavaScript只能访问与包含它的文档在同一个域中的内容。所谓同源,就是域名、协议、端口都一样。/div div style='display:block '。例如,一个黑客程序用IFrame在他的页面上嵌入了真实的银行登录页面。当你用真实的用户名和密码登录时,他的页面可以通过Javascript读取你输入表单中的内容,从而轻松获取用户名和密码。例如,黑客程序使用IFrame将真实的银行登录页面嵌入到他的页面中。当你用真实的用户名和密码登录时,他的页面可以通过Javascript读取你的输入表单中的内容,这样用户名和密码就很容易被获取。例如,黑客程序使用IFrame将真实的银行登录页面嵌入到他的页面中。当你用真实的用户名和密码登录时,他的页面可以通过Javascript读取你的输入表单中的内容,这样用户名和密码就很容易被获取。

例如,黑客程序使用IFrame将真实的银行登录页面嵌入到他的页面中。当你用真实的用户名和密码登录时,他的页面可以通过Javascript读取你的输入表单中的内容,这样用户名和密码就很容易被获取。例如,黑客程序使用IFrame将真实的银行登录页面嵌入到他的页面中。当你用真实的用户名和密码登录时,他的页面可以通过Javascript读取你的输入表单中的内容,这样用户名和密码就很容易被获取。例如,黑客程序使用IFrame将真实的银行登录页面嵌入到他的页面中。当你用真实的用户名和密码登录时,他的页面可以通过Javascript读取你的输入表单中的内容,这样用户名和密码就很容易被获取。例如,黑客程序使用IFrame将真实的银行登录页面嵌入到他的页面中。当你用真实的用户名和密码登录时,他的页面可以通过Javascript读取你的输入表单中的内容,这样用户名和密码就很容易被获取。例如,黑客程序使用IFrame将真实的银行登录页面嵌入到他的页面中。当你用真实的用户名和密码登录时,他的页面可以通过Javascript读取你的输入表单中的内容,这样用户名和密码就很容易被获取。/div

!-反向嵌入A域的页面-iframe name=' domainA ' src=' ' style=' display:none '/iframe

!-script-script type=' text/JavaScript '//隐藏或显示差异函数BTN点击(){ var div=document。getelementsbytagname(' div ');for(var I in div){ if(idiv。长度)div[I]。风格。display=(div[I]。风格。display==' none ')?阻止":"无";} }/脚本

脚本类型='文本/javascript '函数proxy(){//alert(' BTN点击');//获取本页面的高度变量滚动高度=文档。文档元素。滚动高度;//alert('滚动条高度:'滚动高度);//将窗口的高度先设置到属于多迈纳的内联框架的科学研究委员会属性上var iframeDomainA=document。getelementsbyname(' domain a ')[0];//用多迈纳的一个页面作为代理,最终的目的是解决"同源策略"的限制var URL=' http://localhost:9000/agent ';/**技巧:通过时间戳让浏览器每次重新加载iframe,这样每次都会自动设置被嵌套的内联框架的高度,避免了使用setInterval()*/iframedomaina。src=URL '?时间='新日期()。getTime()' # '滚动高度;}

window.onload=proxy

/脚本

/body/html

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: