前端的框架iframe

2 篇文章 0 订阅
2 篇文章 0 订阅

定义和用法

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

用一个前端的框架解决。

系统中有各种各样的功能模块。把这些模块弄到一个里面。

<iframe src="http://wxy.hbu.cn"></iframe>//框架标签

框架标签

在一个页面中嵌套另一个页面。

src 属性,知道域名

找一个载体,可以承载好多个模块。

建一个user页面,把原先main里的删掉,就剩一个iframe。

访问router,跳到user,在main页面引进来。请求地址。

 

罗列出不同模块的按钮。

 <div class="box">
       <ul class="menu">
        <li><a href="router?path=user" target="whole">用户管理</a></li>
        <li><a href="router?path=content" target="whole">文章管理</a></li>
        <li><a href="router?path=ch" target="whole">栏目管理></a></li>
        <li><a href="router?path=user" target="whole">回收站</a>></li>
    </ul>
    <iframe src=""></iframe>
</div>

main.css的样式到user.css里。给框架(main.css)加样式。

main.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理</title>
<link rel="stylesheet" href="resource/css/main.css?v=1.5">
<script src="/wy2022/resource/js/jquery.min.js"></script>
<script type="text/javascript">
	
	 
</script>
</head>
<body>
	 <div class="box">
	 	<div class="top">
	       <ul class="menu">
	        <li><a href="router?path=user" target="whole">用户管理</a></li>
	        <li><a href="router?path=content" target="whole">文章管理</a></li>
	        <li><a href="router?path=channel" target="whole">栏目管理</a></li>
	        <li><a href="router?path=contentback" target="whole">回收站</a></li>   	   	   	   	 	   
	   	   </ul> 
	   	   <input type="button" value="退出" class="logout">
   		</div>
	<iframe src="router?path=user" name="whole" class="whole"></iframe> 
	 </div>
	
</body>
</html> 

a标签和iframe标签结合,利用target属性,两者一对应 在指定窗口打开对应页面的功能。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值