基于JQuery的Iframe自适应

最新推荐文章于 2019-09-25 22:14:38 发布
最新推荐文章于 2019-09-25 22:14:38 发布
阅读量284 收藏
点赞数
文章标签： iframe自适应 js 自适应
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ok123zxx/article/details/78904742
版权
HTML代码 
<html>
	<head>
		<title>测试页</title>
		<meta name="autoHeight" content="default"/>
		<!-- 这句meta要加-->
	</head>
	<body>
	</body>
</html>



/**
 * iframe自适应代码，可以定义在公共js里
 */
(function () {
	if ($("meta[name=autoHeight]").get(0) != undefined) {
		var html = "";
		html += ' function updateIframe(targetId,height){';
		html += ' /*动态拼接的代码*/ \n';
		html += ' var stop = false;\n';
		html += ' $("iframe").each(function(index,data){\n';
		html += ' if(stop){\n';
		html += ' return ;\n';
		html += ' }\n';
		html += ' var src = $(data).attr("src");\n';
		html += ' if(src == targetId){\n';
		html += ' $(data).height(height);\n';
		html += ' stop = true;\n';
		html += ' return ;\n';
		html += ' }\n';
		html += ' });\n';
		html += ' }\n';
		if (isScroll().scrollY) {
			while (isScroll().scrollY) {
				var id = window.location.pathname + window.location.search;
				var oldHeight = $("body").height();
				var newHeight = oldHeight + 100;
				$("body").height(newHeight);
				if (typeof(parent.updateIframe) === "undefined") {
					parent.eval(html);
				}
				parent.updateIframe(id, newHeight);
			}
		}
	}
})();


/**
 * 是否出现滚动条
 */
var isScroll = function (el) {
	var elems = el ? [el] : [document.documentElement, document.body];
	var scrollX = false,
	scrollY = false;
	for (var i = 0; i < elems.length; i++) {
		var o = elems[i];
		// test horizontal
		var sl = o.scrollLeft;
		o.scrollLeft += (sl > 0) ? -1 : 1;
		o.scrollLeft !== sl && (scrollX = scrollX || true);
		o.scrollLeft = sl;
		// test vertical
		var st = o.scrollTop;
		o.scrollTop += (st > 0) ? -1 : 1;
		o.scrollTop !== st && (scrollY = scrollY || true);
		o.scrollTop = st;
	}
	// ret
	return {
		scrollX: scrollX,
		scrollY: scrollY
	};
};





caion
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery对iframe自适应高度插件
02-23
jquery对iframe自适应高度插件是国外下载下来的。插件使用只要引用js文件就行，不用做任何别的操作完全自动化。
js实现自适应浏览器的高度和宽度
☆╮123☆
12-16 1293
超级简单的方法，也不用写什么判断浏览器高度、宽度啥的。 下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。 注意别放错地方了哦。 iframe代码，注意要写ID jquery代码１： //注意：下面的代码是放在test.html调用 $(window.parent.document).find("#main").load(f
jsjQuery实现iframe高度自适应
shirukai
06-22 432
js/jQuery实现iframe高度自适应 虽然现在前端框架很多，但是有时候还是会需要用到iframe的，在使用iframe的时候，为了美观一点，会尽量避免在父窗口中出现滚动条，在notebook这个项目案例中，也是大量使用了iframe，其中也有高度自适应，下面将用原生js和jQuery两种方法去实现高度自适应。 js代码写在iframe子页面中 //初始化方法 ...
jquery库实现iframe自适应内容高度和宽度
mituan1234567的专栏
07-01 660
http://neverstoping.iteye.com/blog/1540370 javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码！  ‍  基于Jquery库的代码很好实现：    $(document).ready(function(){        $("#mainframe").load(function
JQuery IFrame框架高度自适应（支持嵌套–兼容IE,ff,safafi,chrome）
十年回首，一纸感动!
03-02 1440
在网上找了很多的iframe自适应高度的脚本，对浏览的的兼容性都不好。所以就想利用jquery强大的兼容性，写一个iframe自适应高度的脚本。 jquery很强大，代码很简单： $("#iPersonalInfo").load(function() { $(this).height($(this).contents().height()); }) 有一点需要注意的，我也在调
教你用jquery实现iframe自适应高度
01-19
jquery代码一： 代码如下://注意：下面的代码是放在test.html调用 $(window.parent.document).find(“#main”).load(function(){ var main = $(window.parent.document).find(“#main”); var thisheight = $...
iframe自适应宽高
11-08
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
jquery ajax应用中iframe自适应高度问题解决方法
10-26
很多管理系统中，都使用iframe进行信息内容的展示方式，或者作为主菜单的链接展示内容。使用iframe的问题就是自适应高度的问题
jQuery解决iframe高度自适应代码
10-29
网上查了好多用着都不行，自己搞定了：在包含iframe的页面中加入以下脚本，基本思想是在iframe加载内容后重新设置高度，下面代码尽在IE6中用过，没在其他浏览器中测试。
jquery iframe自适应高度
★昔梦无痕★
04-30 577
经典代码 iFrame 自适应高度，在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。 很古老的方法： function iFrameHeight() { var ifm = document.getElementById("iframe"); var subWeb = document.frames ? document.fr
jQuery js iframe 自适应高度
の原為じ簡單
07-23 122
方法一、jQuery   &lt;script type="text/javascript"&gt; &lt;!-- $(function(){ $("#workArea").load(function(){ var height = $(this).contents().find("#box").height() + 40; ...
jquery 实现iframe高度自适应
燃烧JAVA
10-03 1302
今天碰到一个问题，页面中使用了iframe，开始的时候设置了高度为100%，发现高度老是很高，不受控制，
jquery实现iframe自适应高度
tingwufeixiang的博客
01-17 884
1、iframe自适应页面高度       首先需要给iframe设置一个id，不需要滚动条则加上scrolling="no"       然后加上一个onload事件function iFrameHeight(iframe) { var ifm= document.getElementById(iframe.id); var subWeb = document.frames
jquery iframe自适应高度代码（浏览器兼容）
周十一的技术博客
06-08 817
这里提供一款由jquery提供iframe自适应高度代码并且是兼容多浏览器iframe自适应高度。 更多详细内容请查看：http://www.111cn.net/wy/jquery/jquery_iframe.htm $("#ipersonalinfo").load(function() { $(this).height($(this).contents().height()); })
Iframe高度自适应
qq_37468157的博客
09-25 231
Iframe高度自适应 ／／iframe对象 <iframe id="yearDetail" name="yearDetail" src="" style="overflow:visible;" scrolling="yes" frameborder="no" width="100%"></iframe> function reinitIf...
jquery控制iframe根据内容高度自动调整问题。
chen798213337的博客
02-26 3205
1、问题描述 $(function() {     $("#JmenuFrame").load(function() {         var height = $(this).contents().find("body").height() + 40;         $(this).height(height   }); }); 该段代码实现 jquery控制iframe高度
jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
12-01 129
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法。分享给大家供大家参考，具体如下： 方式1： //注意：下面的代码是放在和iframe同一个页面中调用 $("#iframeId").load(function () { var mainheight = $(this).contents().find("body").height(...
jQuery Grid 高度自适应
最新发布
06-09
让 jQuery Grid 的高度自适应需要进行如下配置： 1. 将 `height` 属性设置为 `'100%'`； 2. 将 `autoheight` 属性设置为 `true`。 具体代码如下： ```javascript $(gridSelector).jqGrid({ url: '...', datatype: 'json', mtype: 'GET', colModel: [...], rowNum: 10, rowList: [10, 20, 30], pager: '#pager', height: '100%', autoheight: true, ... }); ``` 这样就可以让 jQuery Grid 的高度自适应了。需要注意的是，如果你在使用 `autoheight` 属性的同时也设置了 `height` 属性，那么 `autoheight` 属性就会失效，因为此时 Grid 的高度是由 `height` 属性所指定的。因此，我们在进行高度自适应的时候，只需要将 `height` 属性设置为 `'100%'` 即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值