• 【Html】div 加载 html页面的方法


    做网页的单页面应用时,需要在一个HTML的Div元素中加载另一个HTML页面,以前有一种方法就是用iframe,举例如下:(亲测可行)

    <div class="main-container" id="main" style="99%">
       <iframe src="info.html" width="100%" height="800" frameborder="0">
            您的浏览器不支持iframe,请升级
       </iframe>
    </div>

    但是说有点重量级。那么还有没有另外的方法呢?(未测试)

    <script>
            function load_home() {
    
                document.getElementById("main").innerHTML = '<object type="text/html" data="info.html" width="100%" height="600px"></object>';
            }
    </script>
    <a class="sub-link" href="javascript:load_home();">load html</a>

    可以用此方法进行页面加载。

    另外还有一种就是用jquery的load方法,但是测试后发现页面不能正常布局:(未测试)

    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>jQuery Load (js和css有问题?)</title>
            <script src="../js/jquery-3.3.1.js"></script>
            <script type="text/javascript">
                jQuery(function(){
                    jQuery('#loadPage').click(function(){
                        jQuery('#pagecontainer').load('info.html', 
                                function(){alert('Content Successfully Loaded.')} 
                        );
                    });
                })
            </script>        
        </head>
        <body>
            <a href="javascript:void(0)" id="loadPage">Click To Load Web Page</a><br/>
            <div id="pagecontainer"></div>        
        </body>
    </html>

    我是用下面的方法的,最简单了(亲测可行):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
          <meta charset="UTF-8">
        <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
        <script>
    $(document).ready(function(){
        $('#head').load('info_inner.html');
    })
    </script>
    </head>
    <body>
    <div id="head">
    
    </div>
    </body>

    参考文章:https://www.cnblogs.com/isaboy/p/div_load_html_iframe_object.html

  • 相关阅读:
    模仿JavaAppArguments.java示例,编写一个程序,此程序从命令行接收多个数 字,求和之后输出结果,写出其的设计思想、程序流程图、源程序代码。
    大道至简第二章读后感
    大道至简第一章读后感
    md5实现
    jdk-动态代理
    使用反射复制对象
    java-二分查找法
    java-base64
    cxf框架使用(一)
    Freemarket学习笔记(一)
  • 原文地址:https://www.cnblogs.com/mqxs/p/9973281.html
Copyright © 2020-2023  润新知