不用ajax的局部页面跳转实现方法（iframe）

最新推荐文章于 2024-06-28 10:17:09 发布

dancheng_work

最新推荐文章于 2024-06-28 10:17:09 发布

阅读量1.3k

点赞数

分类专栏： # php基础

本文链接：https://blog.csdn.net/dancheng1/article/details/75270859

版权

php基础专栏收录该内容

27 篇文章 0 订阅

订阅专栏

Iframe实现局部刷新的原理

可以在页面中使用iframe来嵌套其他页面

在iframe中，可以使用js来操作父页面

实现后的效果图：

当焦点从用户名后的文本框中移开时出现的效果

父页面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="reg.php" method="post">
        <ul>
            <li><label for="">用户名：</label><input type="text" name="username" id="username"> <span id="message"></span></li>
            <li><label for="">密  码：</label><input type="password" name="password" ></li>
            <li><label for=""> </label><input type="submit" value="注册" ></li>
            <iframe src="" frameborder="0" id="ifr"></iframe>
        </ul>
    </form>
    <script type="text/javascript">
        var username = document.getElementById("username");
        var ifr = document.getElementById("ifr");
        //绑定失去焦点事件
        username.onblur = function(){
            //向iframe发出请求，实际上就是设置其src属性
            ifr.src = "doreg.php?username=" + username.value;
        }
    </script>
</body>
</html>

子页面doreg.php的代码：

<?php
//获取用户名
$username = $_GET['username'];
//对该用户名检测
$message = "";
if($username == "admin"){
    $message = "对不起，该用户名已被占用！";
} else {
    $message = "恭喜，该用户名可用！";
}


//在子页面编写js代码操作父页面，通过php输出一段js代码
echo <<<STR
<script type="text/javascript">
    window.parent.document.getElementById("message").innerHTML = "$message";
</script>
STR;