Rumah hujung hadapan web tutorial js JavaScript 处理Iframe自适应高度(同或不同域名下)_javascript技巧

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

May 16, 2016 pm 05:38 PM
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在另一个域
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimanakah cara saya memangkas IFrame dalam HTML? Bagaimanakah cara saya memangkas IFrame dalam HTML? Aug 29, 2023 pm 04:33 PM

Bagaimanakah cara saya memangkas IFrame dalam HTML?

Apakah maksud data-id dalam iframe? Apakah maksud data-id dalam iframe? Aug 28, 2023 pm 02:25 PM

Apakah maksud data-id dalam iframe?

Mengapa iframe dimuatkan dengan perlahan? Mengapa iframe dimuatkan dengan perlahan? Aug 24, 2023 pm 05:51 PM

Mengapa iframe dimuatkan dengan perlahan?

Apakah teknologi yang boleh menggantikan iframe Apakah teknologi yang boleh menggantikan iframe Aug 24, 2023 pm 01:53 PM

Apakah teknologi yang boleh menggantikan iframe

Microsoft: Ralat Outlook memuat turun fail 'TokenFactoryIframe' pada setiap lawatan Microsoft: Ralat Outlook memuat turun fail 'TokenFactoryIframe' pada setiap lawatan Apr 19, 2023 am 08:25 AM

Microsoft: Ralat Outlook memuat turun fail 'TokenFactoryIframe' pada setiap lawatan

Apakah peristiwa pemuatan iframe? Apakah peristiwa pemuatan iframe? Aug 28, 2023 pm 01:55 PM

Apakah peristiwa pemuatan iframe?

Apakah bahaya dalam iframes Apakah bahaya dalam iframes Sep 08, 2023 pm 03:14 PM

Apakah bahaya dalam iframes

Apakah maksud iframe dalam Python? Apakah maksud iframe dalam Python? Aug 25, 2023 pm 03:24 PM

Apakah maksud iframe dalam Python?

See all articles