首页 web前端 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在另一个域
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

我如何裁剪HTML中的IFrame? 我如何裁剪HTML中的IFrame? Aug 29, 2023 pm 04:33 PM

我如何裁剪HTML中的IFrame?

iframe中的data-id是什么意思 iframe中的data-id是什么意思 Aug 28, 2023 pm 02:25 PM

iframe中的data-id是什么意思

iframe为什么加载慢 iframe为什么加载慢 Aug 24, 2023 pm 05:51 PM

iframe为什么加载慢

什么技术可以代替iframe 什么技术可以代替iframe Aug 24, 2023 pm 01:53 PM

什么技术可以代替iframe

微软:每次访问时 Outlook 错误都会下载“TokenFactoryIframe”文件 微软:每次访问时 Outlook 错误都会下载“TokenFactoryIframe”文件 Apr 19, 2023 am 08:25 AM

微软:每次访问时 Outlook 错误都会下载“TokenFactoryIframe”文件

iframe有哪些加载事件 iframe有哪些加载事件 Aug 28, 2023 pm 01:55 PM

iframe有哪些加载事件

iframe中的危险在哪里 iframe中的危险在哪里 Sep 08, 2023 pm 03:14 PM

iframe中的危险在哪里

Python中iframe是什么意思 Python中iframe是什么意思 Aug 25, 2023 pm 03:24 PM

Python中iframe是什么意思

See all articles