iframe 页面的使用与动态改变 src 路径

最新推荐文章于 2023-11-01 10:55:19 发布

I'm ---

最新推荐文章于 2023-11-01 10:55:19 发布

阅读量1w

点赞数 4

分类专栏： HTML 文章标签： iframe html

本文链接：https://blog.csdn.net/qq_43312337/article/details/102912414

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、iframe 标签定义了包含另外一个文档的内联框架。。意思是说通过其 src 属性，可以把一个页面链接到这个标签内。

提示：目前所有的主流浏览器都支持这个标签，如果想知道哪些不支持的浏览器，可以在两个标签中添加文本，例如： <iframe·>该浏览器不支持 iframe 标签<·/iframe>，浏览器不支持就会显示标签的文本。

iframe 标签常用的属性
src 链接到的带的目标 URL。
height 设定 iframe框架的高度。
width 设定 iframe框架的宽度。
name iframe框架的名字。
scrolling iframe是否可拥有滚动条。

2、下面的是我自己使用的例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>iframe标签的使用</title>
		
		<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="../fonts/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>

		<script src="../js/jquery/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery/jquery.color.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="" class="test">
			<div class="test_left">
				<ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="test">
					<li class="layui-nav-item"><a href="#" id="tx"><span class="iconfont">&#xe608;</span> 腾讯</a></li>
					<li class="layui-nav-item"><a href="#" id="taobao"><span class="iconfont">&#xe60a;</span> 淘宝</a></li>
					<li class="layui-nav-item"><a href="#" id="myBlog"><span class="iconfont">&#xe761;</span> 我的博客</a></li>
				</ul>
			</div>
			<div class="test_right">
				<iframe id="contentDiv" name="iframe" src="https://blog.csdn.net/qq_43312337/article/details/102912414" 
				class="contents " >该浏览器不支持 iframe 页面，请更换浏览器</iframe>
			</div>
		</div>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

我这里使用了 layui 中的 nav 侧边导航栏，组件的简单使用还是不错的，只需要导入其对应的包就可以
使用 nav 导航栏单击事件，单击时候切换 iframe 的 URL 地址，从而达到一个 iframe 标签链接不同的页面。

(function(){
	var app = {};		// 全局对象
	var layer,element;		// layui 组件
	
	layui.use(['layer','element'],function(){
		layer = layui.layer;
		element = layui.element;
		
		// 初始化方法
		layer.ready(function(){
			app.init();
		});
		
	})
	
	app.init = function(){
		app.elemOn();
	}
	
	/**
	 *  导航栏单击触发
	 */
	app.elemOn = function(){
		element.on('nav(test)',function(data){
			app.changeContent(data[0].id)
		});
	}
	
	/**
	 * 根据点击的类型来显示不同的 iframe 页面
	 */
	app.changeContent = function(type){
		switch (type){
			case 'myBlog':
				$("#contentDiv").attr("src","https://blog.csdn.net/qq_43312337/article/details/102912414")
				break;
			case 'taobao':
				$("#contentDiv").attr("src","https://uland.taobao.com")
				break;
			default:
				$("#contentDiv").attr("src","https://www.tencent.com")
				break;
		}
	}
})();