实现了iframe的页面跳转的功能

Posted 2020-07-11 普罗旺斯的春天

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现了iframe的页面跳转的功能相关的知识，希望对你有一定的参考价值。

　　之前没有接触过iframe的相关功能,最近看到项目中基本上都是用iframe嵌套子页面,于是自己想编写实现这个过程,为以后的工作提供便利.

　　main页面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/main.css"/>
    <script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
    <header id="top">
        <ul>
            <li id="foot1">首页</li>
            <li id="foot2">子页面1</li>
            <li id="foot3">子页面2</li>
            <li id="foot4">子页面3</li>
        </ul>
    </header>
    <section id="main">
        <iframe frameborder="0" src="01.html"></iframe>
    </section>
    <footer id="foot">&copy;mumu</footer>
    <script src="js/jsss.js">
    </script>
</body>
</html>

js中的代码:

$(function(){
    $("#foot2").click(function(){
        console.log("safd");
        $("iframe").attr("src","02.html");
    });
    $("#foot3").click(function(){
        console.log("safd");
        $("iframe").attr("src","03.html");
    });
    $("#foot4").click(function(){
        console.log("safd");
        $("iframe").attr("src","04.html");
    });
    $("#foot1").click(function(){
        console.log("safd");
        $("iframe").attr("src","01.html");
    })
});

子页面1:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    body{
        width: 1200px;
        margin: 0 auto;
    }
</style>
<body>
    子页面111111111111111111111111111111111111111
</body>
</html>

子页面2:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    body{
        width: 1200px;
        margin: 0 auto;
    }
</style>
<body>
    子页面222222222222222222222222222222222222222
</body>
</html>

子页面3:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    body{
        width: 1200px;
        margin: 0 auto;
    }
</style>
<body>
    子页面33333333333333333333333333333
</body>
</html>

子页面4:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    body{
        width: 1200px;
        margin: 0 auto;
    }
</style>
<body>
    子页面444444444444444444444444444444444
</body>
</html>
以上没有布上css样式.自己脑补。

以上是关于实现了iframe的页面跳转的功能的主要内容，如果未能解决你的问题，请参考以下文章