做网页的单页面应用时，需要在一个HTML的Div元素中加载另一个HTML页面，以前有一种方法就是用iframe，举例如下：

  <div class="main-container" id="main" style="width:99%">

   <iframe src="diagrambuilder/dashboard/diagrambuilder/default.html" width="100%" height="800" frameborder="0">

        您的浏览器不支持iframe，请升级

   </iframe>

   </div>

但是说有点重量级。那么还有没有另外的方法呢？

     <script>

         function load_home() {

             document.getElementById("main").innerHTML = '<object type="text/html" data="diagrambuilder/dashboard/diagrambuilder/default.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="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

         <script type="text/javascript">

             jQuery(function(){

                 jQuery('#loadPage').click(function(){

                     jQuery('#pagecontainer').load('app/diagrambuilder/dashboard/diagrambuilder/default.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>

div 加载 html页面的方法的更多相关文章

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

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

  2. Win8.1 Metro应用无法联网，提示“无法加载此页面”解决方法！(看红色字体部分)

    Windows 8 Metro Apps使用Proxifier的方法 By Shinichi_Wtn2012-07-05 20:28 在校园里,经常要使用代理上网的方式,Proxifier可以让不支持 ...

  3. 在ASP.NET MVC中使用jQuery的Load方法加载静态页面的一个注意点

    使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; s ...

  4. Jquery load()加载GB2312页面时出现乱码的解决方法

    问题描述:jquery的字符集是utf-8,load方法加载完GB2312编码静态页面后,出现中文乱码. a.php <script language="javascript" ...

  5. 解决移动端rem加载瞬间页面错乱的方法（放大或者缩小）

    移动端布局有很多种,这里我们最常使用到rem+百分比的布局方式(高度/字体设置rem单位,宽度设置百分比)来处理屏幕兼容,这种方法在兼容上是比较不错的,可以使得字体以及整体适应各种大小的屏幕,可以解决 ...

  6. 【转】实现ViewPager懒加载的三种方法

    方法一 在Fragment可见时请求数据.此方案仍预加载了前后的页面,但是没有请求数据,只有进入到当前Framgent时才请求数据. 优点:实现了数据的懒加载缺点:一次仍是三个Framgment对象, ...

  7. JqueryEasyUI 解决IE下加载时页面错乱的问题 分类： JavaScript JqueryEasyUI 2014-09-20 09:50 545人阅读 评论(1) 收藏

    问题描述: 一直觉得jqueryeasyui在IE下的渲染效果不大好,尤其刚进入页面时的加载,页面会出现布局错乱,虽然是一闪而过,但是给用户的体验不好: 可以通过在页面onload时,增加一个遮罩层, ...

  8. 两种动态加载JavaScript文件的方法

    两种动态加载JavaScript文件的方法 第一种便是利用ajax方式,第二种是,动静创建一个script标签,配置其src属性,经过把script标签拔出到页面head来加载js,感乐趣的网友可以看 ...

  9. iOS “请在微信客户端打开链接” UIWebview加载H5页面携带session、cookie、User-Agent信息 设置cookie、清除cookie、设置User-Agent

    公司新开的一个项目..内容基本上是加载H5页面显示..当时觉得挺简单的..后来发现自己掉坑里了..一些心理历程就不说了..说这个项目主要用到的知识点吧..也是自己踩得坑. 首先说说..这个项目上的内容 ...

随机推荐

  1. iOS之绘制虚线

    /*   ** lineFrame:     虚线的 frame   ** length:        虚线中短线的宽度   ** spacing:       虚线中短线之间的间距   ** co ...

  2. SVN的使用

  3. 三大框架SSH整合

    三大框架SSH整合 -------------------------------Spring整合Hibernate------------------------------- 一.为什么要整合Hi ...

  4. AlloyTeam2015前端大会都说了啥

    昨天在腾讯大厦参与了鹅厂AlloyTeam召开的AC2015前端大会,度过了充满精彩和收获的一个下午,用一句话形容这次前端Event应该是“诚意满满,干货满满”. 说实话,这次AlloyTeam没有对 ...

  5. Goodbye2014，Hello2015

    正如我在研发会议上说的,总结是为了更好的计划:而计划,则是让你做事有目标,有方向:有了目标和方向,你才能真正把事情做成! 总的来说2014年可以归纳为下图: 2014年总结 一年的活动,基本可以归纳为 ...

  6. 快速Android开发系列网络篇之Volley

    Volley是Google推出的一个网络请求库,已经被放到了Android源码中,地址在这里,先看使用方法 RequestQueue mRequestQueue = Volley.newRequest ...

  7. 创建一个Phone实体，完成多页面的电话簿项目

    添加实体 在类库CORE中添加: [Table("PbPhones")] public class Phone : CreationAuditedEntity<long> ...

  8. ubuntu 启动MySql和安装python的MySQLdb模块

    ubuntu一般会自己预安装mysql,你只需 /etc/init.d/mysql start|stop|restart|reload|force-reload|status  命令便可以实现mysq ...

  9. C# BS消息推送 负载均衡-SignalR&Redis的配置（三）

    1. 前言 本文是根据网上前人的总结得出的. 环境: SignalR2.x,VS2015,Win10 2. 负载均衡配置 配置很简单,只要在startup类中添加Redis的连接就OK. 1)首先,引 ...

  10. 详细解说 STL 排序(Sort)

    0 前言: STL,为什么你必须掌握 对于程序员来说,数据结构是必修的一门课.从查找到排序,从链表到二叉树,几乎所有的算法和原理都需要理解,理解不了也要死记硬背下来.幸运的是这些理论都已经比较成熟,算 ...