div中插入iframe框架，使连接跳转直接显示在iframe框架中

最新推荐文章于 2022-02-15 12:14:17 发布

三横同学

最新推荐文章于 2022-02-15 12:14:17 发布

阅读量792

点赞数

分类专栏：笔记文章标签： js javascript html

原文链接：https://blog.csdn.net/majic_Jing

版权

笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

这篇博客介绍了一个在不改变URL的情况下，通过HTML和iframe实现页面内容切换的方法。作者引用了@majic_Jing的解决方案，创建了一个包含多个链接的表格，每个链接指向不同的网站，当点击链接时，iframe的内容会相应更新，展示所选网站的内容。

摘要由CSDN通过智能技术生成

在完成学校老师给的任务中,要求在同一url下访问不同的内容,通过查找学习,我找到了,如下解决方法;

注:该方法转自 @majic_Jing

<!DOCTYPE html>
<html>
<head>
	<title>majic_Jing</title>
	<style type="text/css">
		.div1{
			width:100px;height:330px;  float: left; border: 1px solid #ccc;
		}
		.div2{
			width:500px ;height:330px; float: left; border: 1px solid #ccc;
		}
	</style>
</head>
<body>
	<div class="div1">
		<table style="width:100px"  cellspacing="0"  >
			<tr><td><a href="http://baidu.com" target="demo" style="text-decoration: none;color: #000">点击跳转百度</a></td></tr>
			<tr><td><a href="http://jd.com" target="demo" style="text-decoration: none;color: #000">点击跳转京东</a></td></tr>
			<tr><td><a href="https://mp.csdn.net" target="demo" style="text-decoration: none;color: #000">点击跳转CSDN</a></td></tr>
		</table>		
	</div>
	<div class="div2">
		<iframe src="map.html" width="500" height="330" name="demo" frameborder="0"></iframe>
	</div>
</body>
</html>