Rumah hujung hadapan web html tutorial 跨域下iframe自适应高度_html/css_WEB-ITnose

跨域下iframe自适应高度_html/css_WEB-ITnose

Jun 24, 2016 am 11:28 AM

最近在做一个需求,需求大致背景:页面中iframe嵌入另一家公司的列表页

博主的第一反应就是“very easy!”,so,挽起双袖开始敲代码

结果出现问题了,iframe跨域,无法获得内嵌页面的高度,因此出现的上下滚动条,so难看!

于是上网找大神,皇天不负有心人啊,终于找到了,激动之情无以言表....

故事背景交代完毕

/******************************华丽的分割线,哈哈****************************/

大神的例子大致是这样的:

假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。

我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度

a.html中包含iframe:

1 <iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>
Salin selepas log masuk

在c.html中加入如下代码:

1 <iframe id="c_iframe"  height="0" width="0"  src="http://www.a.com/agent.html" style="display:none" ></iframe>2 <script type="text/javascript">3 (function autoHeight(){4 var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);5 var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);6 var c_iframe = document.getElementById("c_iframe");7 c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height;  // 这里通过hash传递b.htm的宽高8 })();9 </script>
Salin selepas log masuk

最后,agent.html中放入一段js:

 1 <script type="text/javascript"> 2 var b_iframe = window.parent.parent.document.getElementById("Iframe"); 3 var hash_url = window.location.hash; 4 if(hash_url.indexOf("#")>=0){ 5 var hash_width = hash_url.split("#")[1].split("|")[0]+"px"; 6 var hash_height = hash_url.split("#")[1].split("|")[1]+"px"; 7 b_iframe.style.width = hash_width; 8 b_iframe.style.height = hash_height; 9 }10 </script>
Salin selepas log masuk

agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agent.html在www.a.com下,所以操作a.html时不受JavaScript的同源限制)

 

文章引用:前端开发博客

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

Tag artikel 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)

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?

Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

Bagaimana cara menambah kesan strok kepada imej PNG di laman web?

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Apakah tujuan & lt; meter & gt; unsur?

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Apakah tujuan & lt; DATALIST & GT; unsur?

Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Apakah tujuan & lt; kemajuan & gt; unsur?

See all articles