真正的让iframe自适应高度兼容多种浏览器随着窗口大小改变

最新推荐文章于 2024-05-30 16:18:48 发布

H_MZ

最新推荐文章于 2024-05-30 16:18:48 发布

阅读量250

点赞数

文章标签： javascript ViewUI

http://blog.csdn.net/alex8046/article/details/51456131

<!DOCTYPE html>
<html lang="zh">
<head>
	<title>{$config.site_name}</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="{$config.site_keywords|escape:html}" />
	<meta name="description" content="{$config.site_description|escape:html}" />
	<LINK href="/static/css/reset.css" type=text/css rel=stylesheet>
	<LINK href="/static/css/gameplay.css" type=text/css rel=stylesheet>
	<script type="text/javascript" src="/static/js/jquery.min.js"></script>
	<script>
		{literal}
		$(function(){
				adjustWidthHeight();
		});
		function adjustWidthHeight() {
				var width = $(window).width(); //浏览器当前窗口可视区域宽度
				var height = $(window).height();
				$("#g_canvas").width(width - 50);
				$("#g_canvas").height(height - 40);
				//$('#gameifr').width(width - 50);
				//$('#gameifr').height(height - 40);
		}
		$(window).resize(function () {
				adjustWidthHeight();
		});
		{/literal}
	</script>
</head>
<body>
<div class="top">
这是头部
</div>
<div id="g_canvas">
<iframe id="gameifr" scrolling="auto" src="{$game_login_gateway}" frameborder="no" width="100%" height="100%" style="overflow: auto;"></iframe>
</div>
</body>
</html>

关注博主即可阅读全文