iframe简单应用

最新推荐文章于 2024-09-11 21:57:53 发布

lucky-peach

最新推荐文章于 2024-09-11 21:57:53 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： iframe

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

iframe概念

<iframe src="ch.html" frameborder="0" name="iframe" id="iframe"></iframe>

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。

iframe标签的属性

iframe常用属性:
1.frameborder:是否显示边框，1显示，0不显示
2.height:框架作为一个普通元素的高度，建议在使用css设置。
3.width:框架作为一个普通元素的宽度，建议使用css设置。
4.name:框架的名称，window.frames[name]时专用的属性。
5.scrolling:框架的是否滚动。yes（始终显示滚动条）,no（从不显示滚动条）,auto（需要时显示滚动条）。
6.src：内框架的地址，可以使页面地址，也可以是图片的地址。
7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
8.sandbox: 对iframe进行一些列限制，IE10+支持

简单使用

直接在iframe标签的src属性中指定嵌套页面例：

<div class="layui-body ">
    <iframe src="https://www.baidu.com/" width="100%"  height="100%"  name="iframe" id="iframe"></iframe>
</div>

也可以修改src属性嵌套自己项目中页面

获取iframe里的内容

通过contentWindow和contentDocument两个API获取iframe的window对象和document对象。

var iframe = document.getElementById("iframe");
var window = iframe.contentWindow;
var doc = iwindow.document;
console.log("window"+iwindow);//获取iframe的window对象
console.log("document"+idoc);  //获取iframe的document
console.log("html"+doc.documentElement);//获取iframe的html
console.log("head"+doc.head);  //获取head

结合iframe的name属性获取window对象

var window=window.frames['iframw'];
console.log('window'+window); //获取iframe的window对象

在iframe中获取父级内容

window.parent 获取上一级的window对象，如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象，即，就是你打开页面的文档
window.self 返回自身window的引用。

看图理解

注意：自由操作iframe和父框架的内容(DOM). 但前提条件是同域. 如果跨域只能实现页面跳转

iframe简单应用demo

结合layui来实现点击点击某个模块局部跳转刷新

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>iframe</title>
   <meta name="renderer" content="webkit">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
   <script type="text/javascript" src="layui/layui.js"></script>
   <script type="text/javascript" src="jquery/jquery.min.js"></script>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<!--头部标题及导航-->
		<div class="layui-header">
			<!--logo部分-->
			<div class="layui-logo">iframe</div>
			<!--顶部导航左侧-->
			<!--<ul class="layui-nav layui-layout-left ">
			 	<li class="layui-nav-item"><a href="">最新活动</a></li>
			    <li class="layui-nav-item"><a href="javascript:;">产品</a></li>
			    <li class="layui-nav-item"><a href="">大数据</a></li>
			    <li class="layui-nav-item"><a href="javascript:;">解决方案</a></li>
			    <li class="layui-nav-item"><a href="">社区</a></li>
			</ul><--></-->
			<!--顶部导航右侧-->
			<div class="layui-layout-right">
				<ul class="layui-nav">
					<li class="layui-nav-item">
					    <a href="">个人中心<span class="layui-badge-dot"></span></a>
					</li>
					<li class="layui-nav-item">
						<a href="">控制台</a>
					</li>
					<!--当前登录用户信息-->
					<li class="layui-nav-item">
						<a href="javascript:;">退出</a>
					</li>
				</ul>
			</div>
		</div>
		<!--侧边导航-->
		<div class="layui-side layui-side-menu layui-larry-side layui-bg-black" id="larry-side">
			<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
				<li class="layui-nav-item layui-nav-itemed">
				    <a class="Item layui-this" href="ch.html" target="">中国</a>
				</li>
				<li class="layui-nav-item">
				    <a class="Item" href="bj.html" target="">北京</a>
				</li>
				<li class="layui-nav-item">
					<a class="Item" href="sh.html" target="">上海</a>
				</li>
				<li class="layui-nav-item">
					<a class="Item" href="gz.html" target="">广州</a>
				</li>
				<li class="layui-nav-item">
					<a class="Item" href="sz.html" target="">深圳</a>
				</li>
			</ul>
		</div>
		<!--中间内容区域-->
		<div class="layui-body ">
			<iframe name="iframe"  id="iframe" src="ch.html"  width="100%" height="100%" frameborder="0"  scrolling="no"></iframe>
		</div>
		<!--底部结尾-->
		<div class="layui-footer layui-bg-green" id="larry-footer" style="text-align: center;">
			坚守自己，奋斗不息
		</div>
	</div>
</body>
<script>
	$(function(){
		//菜单点击
		$(".Item").on('click',function(){
			/*页面跳转*/
			var url = $(this).attr('href');
			console.log(url);
			$("#iframe").attr('src',url);
			/*选中状态*/
			$(".Item").removeClass('layui-this');
			$(this).addClass('layui-this');
			return false;
		});
	});
</script>
</html>

ch.html其他页面都一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2>hello,中国</h2> 
	</body>
</html>