JavaScript 处理Iframe自适应高度(同或不同域名下)_javascript技巧
iframe
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在另一个域
复制代码 代码如下:
当然此处我用的是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.html
复制代码 代码如下:
文字
文字
文字
文字
iframe中介页面agent.html
复制代码 代码如下:
<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在另一个域
Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Wie lange dauert es, um Split Fiction zu schlagen?
3 Wochen vor
By DDD
R.E.P.O. Dateispeicherspeicherort: Wo ist es und wie schützt sie?
3 Wochen vor
By DDD

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wie schneide ich einen IFrame in HTML zu?

Warum wird der Iframe langsam geladen?

Welche Technologie kann Iframe ersetzen?

Microsoft: Outlook-Fehler lädt bei jedem Besuch die Datei „TokenFactoryIframe' herunter

Was sind die Ladeereignisse von iframe?
