zoukankan      html  css  js  c++  java
  • 【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

  • 相关阅读:
    缓冲区溢出学习笔记 一
    什么是TNotifyEvent(转)
    Delphi中dll的使用(转)
    bash 编程
    感觉自己真的很幸运
    开始写程序,发现自己很弱智
    你是我心中不变的新绿(转载)
    做一次年度总结和清理
    今天简直成精力狂了^_^
    Double Do weeks Again : )
  • 原文地址:https://www.cnblogs.com/mqxs/p/9973281.html
Copyright © 2011-2022 走看看