利用a标签的target属性和iframe标签实现页面布局

最新推荐文章于 2024-02-19 01:12:05 发布

Deer__青春

最新推荐文章于 2024-02-19 01:12:05 发布

阅读量2.4k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_40195958/article/details/89952156

版权

javascript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏


<a> 标签target属性规定在任何处打开链接文档，使用target方法可以在一个<iframe>引用中打开该链接
例：
<!-- 通过页面跳转在iframe中打开该链接 -->
<a href="<%=basePath%>es/test/init.do" target="g_frame"><span>字号查询</span></a>


<!-- target和iframe标签之间 实现页面布局-->
<iframe id='g_frame' name='gsj_frame' src="这里可以初始化进入页面时的值" frameborder="0" width="100%" scrolling="no" allowtransparency="true" onload="changeFrameHeight()"></iframe>




function changeFrameHeight(){
 //监控窗口大小变动
 var mainheight = $("#g_frame").contents().find("body").height();
	 if(mainheight == 0  ||　mainheight　==　'0px'){ 
		 try{
			 //如果是初始化，那么获取默认高度
		        var iframe = document.getElementById("g_frame");
		        if(iframe.attachEvent){
		            iframe.attachEvent("onload", function(){
		                iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;
		            });
		            return;
		        }else{
		            iframe.onload = function(){
		                iframe.height = iframe.contentDocument.body.scrollHeight;
		            };
		            return;                 
		        }     
		    }catch(e){
		        throw new Error('setIframeHeight Error');
		    }
	 }else{
		 //获取body的动态高度
		 var minHeight = document.documentElement.clientHeight - 255;
		 if(mainheight < minHeight){
			 mainheight = minHeight;
		 }
		 $("#g_frame").height(mainheight);
		 $("#g_frame").contents().find('body').css('background-color','rgb(255, 255, 255)') ;//填充空白部分为固定背景色
	 }
}

测试用例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li><a href="test1.html" target="g_Frame">终极目标</a></li>
        <li><a href="test2.html" target="g_Frame">终极目标</a></li>
    </ul>
    <iframe width="600" height="800" name="g_Frame" src="test3.html">
    </iframe>
</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>页面1</h2>
    <hr>
    <ol>
        <li>21世纪人才</li>
    </ol>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>技能要求</h2>
    <ul>
        <li>精通Java、JSP、Servlet、EJB、JDBC、SSH(Struts、Springs、Hibernate)、springBoot、分布式、等编程技术；</li>
        <li>具备相当于1-2年的软件开发工作经验。</li>
    </ul>
    <hr>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<h2>页面3</h2>
		<hr>
		<ol>
		    <li>2019构建和谐社会</li>
		</ol>
	</body>
</html>

Deer__青春

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
利用a标签的target属性和iframe标签实现页面布局

<a> 标签target属性规定在任何处打开链接文档，使用target方法可以在一个<iframe>引用中打开该链接例：<a href="<%=basePath%>es/test/init.do" target="g_frame"><span>字号查询</s...
复制链接

扫一扫