a标签实现iframe跳转

最新推荐文章于 2023-05-12 11:03:20 发布

在线小白www

最新推荐文章于 2023-05-12 11:03:20 发布

阅读量2.2k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_43654065/article/details/109443844

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一个页面如果有很多标签切换，将所有的div都写在一个HTML文件中，会造成HTML文件过大，不易阅读和维护。所以需要将切换的div写在其他不同的HTML文件中，这时候就可以采用iframe实现不同的HTML文件在主文件中局部切换。

利用iframe的name属性和a标签的target属性实现a标签和iframe的关联。

<body>
    <div>
        <a href="/iframe/myCommunity.html" target="frame">第一个iframe</a>
        <a href="/iframe/mySoftware.html" target="frame">第二个iframe</a>
        <a href="/iframe/myVip.html" target="frame">第三个iframe</a>
        <a href="" target="frame">第四个iframe</a>
    </div>
    <div>
        <iframe name="frame" frameborder='none' scrolling="no"></iframe>
    </div>
</body>

PS：

关于iframe使用fixed失效问题
fixed定位属于绝对定位，相对于浏览器窗口进行定位，但是iframe本身就类似于创建了一个浏览器窗口，所以对iframe中的元素使用fixed会出现失效问题。
参数设置
scrolling：iframe滚动条设置，auto，默认值，在需要的时候出现滚动条；yes，始终显示滚动条；no，始终不显示滚动条。
frameborder：是否显示周围边框。1，默认值，有边框；0关闭边框；