做网页的单页面应用时，需要在一个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. BAT“搅局”B2B市场，CIO们准备好了吗？

    "CIO必须灵活构建其所在企业的IT系统,深入业务,以应对日新月异的数字化业务环境."   BAT军团"搅局"B2B市场,CIO们准备好了吗? 庞大的企业级市场 ...

  2. Angular2 Hello World 之 2.0

    最近angular2正式版发布了,现在就趁热接着记录一下2.0版的Hello World.据说由RC6升级到2.0代码改动不是很大,在写的时候也感觉改动不是很大,这次记录还是以asp.net core ...

  3. zookeeper集群的搭建以及hadoop ha的相关配置

    1.环境 centos7 hadoop2.6.5 zookeeper3.4.9 jdk1.8 master作为active主机,data1作为standby备用机,三台机器均作为数据节点,yarn资源 ...

  4. Alwayson的IP冲突

    Alwayson的IP冲突 https://social.technet.microsoft.com/Forums/office/en-US/4d50cb1c-eef7-4dcc-b937-3c8eb ...

  5. 深入浅出聊优化：从Draw Calls到GC

    前言: 刚开始写这篇文章的时候选了一个很土的题目...<Unity3D优化全解析>.因为这是一篇临时起意才写的文章,而且陈述的都是既有的事实,因而给自己“文(dou)学(bi)”加工留下的 ...

  6. 【腾讯Bugly干货分享】Android性能优化典范——第6季

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/580d91208d80e49771f0a07c 导语 这里是Android性能优 ...

  7. 【腾讯Bugly干货分享】基于RxJava的一种MVP实现

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57bfef673c1174283d60bac0 Dev Club 是一个交流移动 ...

  8. RavenDB官网文档翻译系列第二

    索引>查询>处理文档关联 处理文档关联 RavenDB坚持的一个设计原则就是文档是独立的,这就是说处理一个文档所需的所有数据都存储在文档本身之中.然而,这不是说对象之间不应存在联系. 在许 ...

  9. ASP.NET Web API 控制器执行过程(一)

    ASP.NET Web API 控制器执行过程(一) 前言 前面两篇讲解了控制器的创建过程,只是从框架源码的角度去简单的了解,在控制器创建过后所执行的过程也是尤为重要的,本篇就来简单的说明一下控制器在 ...

  10. ASP.NET MVC 视图(四)

    ASP.NET MVC 视图(四) 前言 上篇对于利用IoC框架对视图的实现进行依赖注入,最后还简单的介绍一下自定义的视图辅助器是怎么定义和使用的,对于Razor语法的细节和辅助器的使用下篇会说讲到, ...