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>

frameset 和 iframe & Vue中使用iframe

frameset

iframe

Vue中使用iframe嵌入其他应用