iframe的简单使用

1.方式一:根据<a>标签的target方法:
<div class="all_head">
		<ul>
			
			<li><a href="payment/enterPayment" class="color" target="iframe">薪资管理</a></li>
			<li><a href="page/enterSystemManage" class="color" id="sign" target="iframe">系统管理</a></li>
		</ul>
	</div>

<div>
		<iframe id="iframe" name="iframe" width="1360px" height="550px" scrolling="auto" src="page/enterSystemManage"></iframe>
	</div>

2.方式二:利用js方法改变iframe的src内容:
<div class="all_head">
		<ul>
			
			<li><a href="javascript:void(0)" class="color" onclick="changeContent('payment/enterPayment')">薪资管理</a></li>
			<li><a href="javascript:void(0)" class="color" id="sign" onclick="changeContent('page/enterSystemManage')">系统管理</a></li>
		</ul>
	</div>

<div>
		<iframe id="iframe" name="iframe" width="1360px" height="550px" scrolling="auto" src="page/enterSystemManage"></iframe>
	</div>

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
	function changeContent(url){
		$(window.parent.document).find("#iframe").attr("src",url); 
	}
</script>
当然,比较推荐第一种,能不写js就不用写

猜你喜欢

转载自blog.csdn.net/qq_25313187/article/details/78341083