伪AJAX！web实现局部页面刷新

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>局部刷新</title>
        
        
    </head>
    <body>
        <script type="text/javascript">
//            获取提交上来的网址路径
            function loadPage(){
                var targetURL = document.getElementById('url').value;
//                打印targetURL
                console.log(targetURL)
//                加载到iframePosition里
                document.getElementById("iframePosition").src = targetURL;
            }
            </script>
        <div>
            <p>请输入要加载的地址：<span id="aaa"></span></p>
            <p>
                <input type="text" id="url" value="https://www.baidu.com/" />
　　　　　　　　　　<!--提交到上面的loadPage()里去-->
                <input type="button" value="提交" onclick="loadPage()" />
            </p>
            
        </div>


        <div>
            <h3>
                加载的页面位置:
            </h3>
            <iframe style=" 100%;height: 500px;"id="iframePosition" >
                
            </iframe>
        </div>
        
    </body>
</html>

成功截图

伪AJAX！web实现局部页面刷新

伪AJAX！web实现局部页面刷新

相关推荐