做网页的单页面应用时，需要在一个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. Android 中的mvvm

    我们来了解一下MVVM模式与Databinding ,MVVM是一种模式,Databinding 是一种框架.DataBinding是一个实现数据和UI绑定的框架.而ViewModel和View可以通 ...

  2. java中的内部类总结

    内部类不是很好理解,但说白了其实也就是一个类中还包含着另外一个类 如同一个人是由大脑.肢体.器官等身体结果组成,而内部类相当于其中的某个器官之一,例如心脏:它也有自己的属性和行为(血液.跳动) 显然, ...

  3. Linux命令【第二篇】

    1.如何过滤出已知当前目录下oldboy中的所有一级目录(提示:不包含oldboy目录下面目录的子目录及隐藏目录,即只能是一级目录). ^:以什么开头,例如^olboy表示以oldboy开头. ls: ...

  4. ReSharper详解Index0

    JetBrains ReSharper可以帮助Visual Studio用户编写出更好的代码.支持对C#,VB.NET,XAML,JavaScript,TypeScript,JSON,XML,HTML ...

  5. 【腾讯Bugly干货分享】微信iOS SQLite源码优化实践

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57b58022433221be01499480 作者:张三华 前言 随着微信iO ...

  6. 应用Grunt自动化地优化你的项目前端

    在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...

  7. HTML5 <details> 标签

    HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 用法 一般情况下,details用来对显示在页面的内容做进一步骤解释.其展 ...

  8. HTML5网页录音和压缩,边猜边做..(附源码)

    宣传一下自己的qq群: (暗号:C#交流) 欢迎喜欢C#,热爱C#,正在学习C#,准备学习C#的朋友来这里互相学习交流,共同进步 群刚建,人不多,但是都是真正热爱C#的 我也是热爱C#的 希望大家可以 ...

  9. 高级SQL运用

    一:什么是数据库设计? 数据库设计就是将数据库中的数据实体以及这些数据实体之间的关系,进行规范和结构化的过程. 二:为什么要实施数据库设计? 1:良好的数据库设计可以有效的解决数据冗余的问题 2:效率 ...

  10. maven repo plugin archiver

    Failure to transfer org.apache.maven:maven-archiver:pom:2.4.1 from http://repo1.maven.org/xxx was ca ...