HTML内联框架iframe

最新推荐文章于 2024-05-08 23:56:12 发布

kinglyjn

最新推荐文章于 2024-05-08 23:56:12 发布

阅读量1.7k

点赞数

分类专栏： HTML&CSS 文章标签： html iframe

本文链接：https://blog.csdn.net/kinglyjn/article/details/53909828

版权

HTML&CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

由于现在frame和frameset很少使用，已经过时了，已经被div+CSS代替了，所以，这里只是举例说明一下，当下还在使用的内联框架iframe。所谓的iFrame内联框架，简单理解就是在网页内部嵌套一个网页，并且可以一级一级地嵌套下去。

测试代码:

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联框架测试</title>
</head>
<body>
    <div style="margin-left:20%;">
        <!--内联框架可以嵌套-->
        <iframe src="framec.html" frameborder="0" width="60%" height="50%"/>
    </div>

    <!--防止被内嵌js代码-->
    <script type="text/javascript">
        if (window!=top) // 判断当前的window对象是否是top对象
        top.location.href =window.location.href; // 如果不是，将top对象的网址自动导向被嵌入网页的网址
    </script>
</body>
</html>


<!--framec.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>framec</title>
</head>
<body>
    <div style="background-color: green; width:500px;height:300px;">
        <a href="http://www.baidu.com">在当前iframe打开网页</a><br>
        <a href="http://www.baidu.com" target="_parent">在父级frame中打开新网页</a><br>
        <a href="http://www.baidu.com" target="_top">在顶级frame中打开新网页</a>
    </div>
</body>
</html>

效果图：

相关属性：

kinglyjn

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML内联框架iframe

由于现在frame和frameset很少使用，已经过时了，已经被div+CSS代替了，所以，这里只是举例说明一下，当下还在使用的内联框架iframe。所谓的iFrame内联框架，简单理解就是在网页内部嵌套一个网页，并且可以一级一级地嵌套下去。测试代码: <!DOCTYPE html><html><head><meta charset="UTF-8"><t
复制链接

扫一扫