HTML内联框架iframe

时间 2020-06-03 标签 html 内联框架 iframe

因为如今frame和frameset不多使用，已通过时了，已经被div+CSS代替了，因此，这里只是举例说明一下，当下还在使用的内联框架iframe。所谓的iFrame内联框架，简单理解就是在网页内部嵌套一个网页，而且能够一级一级地嵌套下去。javascript

测试代码:
html

<!--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>

效果图：

java