iframe标签通过设置src参数加载网页,

         

利用它实现伪Ajax,在不刷新整个页面时局部更新部分数据,

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        input{margin:0 10px;}
        iframe{height:400px;width:800px;}
    </style>
</head>
<body>
    <div>
        <p>请输入需要加载的地址:<span id="currentTime"></span></p>
        <input type="text" id="webSrc" /><input type="button" value="刷新" onclick="changeWeb()" />
    </div>
    <div>
        <p>加载页面位置:</p>
        <iframe id="loadWeb"></iframe>
    </div>
    <script type="text/javascript">
        <!--设置当前时间,页面刷新时更新,不刷新时不更新,-->
        window.onload = function(){
            var myDate = new Date();
            document.getElementById("currentTime").innerText = myDate.getTime();
        };
        <!--iframe实现伪Ajax:页面不刷新、部分内容重新加载,-->
        function changeWeb(){
            var targetUrl = document.getElementById("webSrc").value;
            document.getElementById("loadWeb").src = targetUrl;
        };
    </script>
</body>
</html>
View Code

效果如下: