窗口与框架

最新推荐文章于 2020-04-14 22:13:56 发布

原创最新推荐文章于 2020-04-14 22:13:56 发布 · 301 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

8 篇文章

订阅专栏

博客介绍了防止页面显示在框架中的相关内容，包括设置目标，还给出了实现该功能的CSS代码和JavaScript代码，另外提到了用JavaScript加载iframe。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防止页面显示在框架中

<!DOCTYPE html>
<html>
<head>
    <title>A Simple Rollover</title>
    <script src="text.js"></script>
</head>
<body>
    <h1>A really important page here that everyone wants to claim as theis.</h1>
</body>
</html>

if(top.location !=self.location){
    top.location.replace(self.location);
}

设置目标

<!DOCTYPE html>
<html>
<head>
    <title>A Simple Rollover</title>
    <script src="text.js"></script>
    <link rel="stylesheet" href="text.css">
</head>
<body>
   <iframe src="next.html" name="icontent" id=icontent"></iframe>
    <h1>Main Content Area</h1>
<h2>
    <a href="next.html">Link 1</a>
    <a href="next1.html">Link 2</a>
    <a href="next.html">Link 3</a>
</h2>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
    Please load a page
</body>
</html>

CSS代码

body{
    background-color: #FFF;
}
iframe#icontent{
    float:right;
    border:1px solid black;
    width:350px;
    height: 300px;
    margin-top: 100px;

}

JavaScript代码

window.onload=initLinks;
function initLinks(){
    for(var i=0;i<document.links.length;i++){
        document.links[i].target="icontent";
    }
}

用JavaScript加载iframe

window.onload=initLinks;
function initLinks(){
    for(var i=0;i<document.links.length;i++){
        document.links[i].onclic=setContent;
    }
}
function setContent(){
    document.getElementById("icontent").contentWindow.document.location.href=this.href;
    return false;
}