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

发布时间：2020-12-16 03:23:36 所属栏目：百科来源：网络整理

导读：Iframe实现局部刷新的原理可以在页面中使用iframe来嵌套其他页面在iframe中，可以使用js来操作父页面实现后的效果图：当焦点从用户名后的文本框中移开时出现的效果父页面的代码： !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/tit

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;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!