frameset
frameset：框架 优点：可以快速搭建页面框架 缺点：不利于搜索引擎搜索
<frameset rows="10%,90%"> <frame src='top.html'/> <frameset cols="20%,80%"> <frame src='left.html'/> <frame name='mainFrame' src='5.jd.html'/> </frameset> </frameset> frameset的属性：
- rows属性： rows="10%,90%" 表示分为两行，第一行占10%，第二行占90%
- cols属性： cols="20%,80%" 表示分为两列，第一行占20%，第二行占80%
frame的属性：
- src='top.html' 表示此frame区域展示top.html的内容
- name='mainFrame' 表示提供一块名称为mainFrame的空白区域
a标签的属性：
- src='xxx' 表示要跳转的都资源地址
- target='mainFrame' 表示在名称为mainFrame的区域展示
top.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 这里是网页头部 </body> </html> left.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> <li> <a href="jd.html" target="mainFrame">京东</a> </li> <li> <a href="taobao.html" target="mainFrame">淘宝</a> </li> </ul> </body> </html> jd.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="background-color: red;"> 这里是京东 </div> </body> </html> taobao.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="background-color: orange;"> 这里是淘宝 </div> </body> </html> iframe
iframe： 内联框架 用于功能性导航，切换切换导航只会加载iframe内的页面 缺点： 对搜索引擎不友好，不利于seo 滚动条体系混乱,且难处理 iframe外无法监控到iframe内部的网页 scrolling属性：scrolling='yes|no|auto' yes表示显示滚动条 no表示不显示滚动条 auto表示高度超出时显示滚动条 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p> <a href="5.jd.html" target="mainFrame">京东</a> <a href="5.taobao.html" target="mainFrame">淘宝</a> </p> <iframe name="mainFrame" src="5.jd.html" width="100%" scrolling="yes" height="100%" frameborder="1"></iframe> </body> </html> Vue中使用iframe嵌入其他应用
/index.vue 中使用iframe引入其他应用
<iframe src="http://xx.xx.xx.xx:3890/#/index" frameborder="1" style="width: 60vw; height: 50vh" ></iframe> 版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjyfx/16254.html