做网页的单页面应用时，需要在一个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. Linux下部署ASP.NET服务连接oracle遇到的问题记录

    一.如何卸载MONO Q:mono是linux系统上跨平台软件,卸载它有两种方式: 1.知道mono安装路径,安装原来的路径直接覆盖安装(最为简单): 2.不知道mono安装路径,首先通过sudo f ...

  2. 四、可空类型Nullable<T>到底是什么鬼

    值类型为什么不可以为空 首先我们都知道引用类型默认值都是null,而值类型的默认值都有非null. 为什么引用类型可以为空?因为引用类型变量都是保存一个对象的地址引用(就像一个url对应一个页面),而 ...

  3. 【转】ofbiz数据库表结构设计

    真心不错的文章,可以加深对企业信息化的设计理解:) http://blog.sina.com.cn/s/blog_a2ca5d8c01017fa0.html http://blog.sina.com. ...

  4. ABP(现代ASP.NET样板开发框架)系列之19、ABP应用层——审计日志

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之19.ABP应用层——审计日志 ABP是“ASP.NET Boilerplate Project (ASP.NET ...

  5. RangePartitioner 实现简记

    摘要: 1.背景 2.rangeBounds 上边界数组源码走读 3.RangePartitioner的sketch 源码走读 4.determineBounds 源码走读 5.关于RangePart ...

  6. Js删除数组重复元素的多种方法

    js对数组元素去重有很多种处理的方法,本篇文章中为网络资源整理,当然每个方法我都去实现了:写下来的目的是希望自己活学活用,下次遇到问题后方便解决. 第一种 function oSort(arr){ v ...

  7. Nginx服务器之Nginx与tomcat结合访问jsp

    本文使用linux centos系统 本文概述: JSP是一种动态网页技术标准.使用的方式是在HTML文件中插入程序段和JSP标记,而形成JSP文件.使用JSP开发WEB应用可以跨平台开发.但jsp需 ...

  8. js连等赋值

    引用:http://www.iteye.com/topic/785445 https://segmentfault.com/q/1010000002637728 这是一个问题 var a = {n:1 ...

  9. 解析大型.NET ERP系统 数据审计功能

    数据审计,英语表达是Audit,是追踪数据变化的过程,记录数据变化前后的值,供参考分析.通过设置,ERP可以追踪一个表的所有字段的变化,也可以只记录指定的字段的值变化.欧美企业每年都有独立的审计部门, ...

  10. 从零开始编写自己的C#框架（21）——添加分类类型页面

    页面权限与页面控件权限经过简单的调试后,终于启用起来了,以后大家添加新页面时,就必须按照本章介绍的方法,将你新增的页面注册到系统中,这样才能访问与进行相关操作. 下面讲讲如何创建一个分类类型的页面. ...