Heim >Web-Frontend >js-Tutorial >JavaScript 处理Iframe自适应高度(同或不同域名下)_javascript技巧

JavaScript 处理Iframe自适应高度(同或不同域名下)_javascript技巧

WBOY
WBOYOriginal
2016-05-16 17:38:581481Durchsuche
1.同域名下Iframe自适应高度的处理
复制代码 代码如下:



当然此处我用的是Asp.Net MVC 此处src设置为路由结构
复制代码 代码如下:



用到的就是iframe嵌套的页面加载完毕的时候,运用onload事件来获取嵌套在iframe中网页的高度,然后赋值给Iframe的高度即可。
2.跨域时Iframe高度自适应
复制代码 代码如下:

在主页面和被嵌套的iframe为不同域名的时候,就稍微麻烦一些,需要避开JavaScript的跨域限制。
原理:现有iframe主页面main.html、被iframe嵌套页面iframe.html、iframe中介页面agent.html三个,通过main.html(域名为http://www.ccvita.com)嵌套iframe.html(域名为:http://www.phpq.net),当用户浏览时执行iframe.html中的JavaScript代码设置iframeC的scr地址中加入iframe页面的高度,agent.html(域名为:http://www.ccvita.com)取得传递的高度,通过JavaScript设置main.html中iframe的高度。最终实现预期的目标。

iframe主页面main.html
[code]


iframe主页面





尾部




iframe嵌套页面iframe.html
复制代码 代码如下:



被iframe嵌套页面

文字










文字










文字










文字















iframe中介页面agent.html
复制代码 代码如下:



iframe中介页面

<script> <BR>function pseth() { <BR>var iObj = parent.parent.document.getElementByIdx('frame_content'); <BR>iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash; <BR>iObj.style.height = iObjH.split("#")[1]+"px"; <BR>} <BR>pseth(); <BR></script>



代码里,kimi可能路径表示不全
main.html 与 agent.html 是必须同一个域里
而iframe.html在另一个域
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn