iframe的简单使用

最新推荐文章于 2024-04-15 15:25:05 发布

原创最新推荐文章于 2024-04-15 15:25:05 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Java #iframe #js

学习专栏收录该内容

43 篇文章

订阅专栏

本文介绍了两种不同的方法来实现iframe的内容加载。一种是直接通过<a>标签的target属性指向iframe，另一种则是利用JavaScript来动态地更改iframe的src属性。这两种方法各有优缺点，文章倾向于推荐使用更为简洁的第一种方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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就不用写