做网页的单页面应用时，需要在一个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 开发一定要看的15个实战项目

    前言: 虽说网上有太多的Android课程,但是大多都是视频,有Android在线开发环境的几乎没有,但是对于学习Android的人来说拥有在线的Android开发环境是非常好的,可以随时动手操作学习 ...

  2. Linux设备管理（一）_kobject, kset,ktype分析

    Linux内核大量使用面向对象的设计思想,通过追踪源码,我们甚至可以使用面向对象语言常用的UML类图来分析Linux设备管理的"类"之间的关系.这里以4.8.5内核为例从kobje ...

  3. PC虚拟现实应用的性能分析与优化：从CPU角度切入

    如今,虚拟现实 (VR) 技术正日益受到欢迎,这主要得益于遵循摩尔定律的技术进步让这一全新体验在技术上成为可能.尽管虚拟现实能给用户带来身临其境般的超凡体验,但相比传统应用,其具有双目渲染.低延迟.高 ...

  4. [计算机网络]简易http server程序

    好久没输出了,知识还是要写下总结才能让思路更加清晰.最近在学习计算机网络相关的知识,来聊聊如何编写一个建议的HTTP服务器. 这个http server的实现源代码我放在了我的github上,有兴趣的 ...

  5. SQL Server 服务器磁盘测试之SQLIO篇（一）

    数据库调优工作中,有一部分是需要排查IO问题的,例如IO的速度或者RAID级别无法响应高并发下的快速请求.最常见的就是查看磁盘每次读写的响应速度,通过性能计数器Avg.Disk sec/Read(Wr ...

  6. ABP(现代ASP.NET样板开发框架)系列之16、ABP应用层——数据传输对象（DTOs）

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之16.ABP应用层——数据传输对象(DTOs) ABP是“ASP.NET Boilerplate Project ...

  7. ABP源码分析十八：UI Inputs

    以下图中描述的接口和类都在Abp项目的Runtime/Validation, UI/Inputs目录下的.在当前版本的ABP(0.83)中这些接口和类并没有实际使用到.阅读代码时可以忽略,无需浪费时间 ...

  8. Entity Framework 6 Recipes 2nd Edition（12-3）译 -> 数据库连接日志

    12-3. 数据库连接日志 问题 你想为每次与数据库的连接和断开记录日志 解决方案 EF为DbContext的连接公开了一个StateChange 事件.我们需要处理这个事件, 为每次与数据库的连接和 ...

  9. Entity Framework 6 Recipes 2nd Edition（13-10）译 -> 显式创建代理

    问题 你有一个POCO实体,原本在执行一个查询时动态创建代理,现在你不想EF延迟创建代理带来的代价. 解决方案 假设你有一个如图Figure13-15的模型 Figure 13-15. A model ...

  10. [Java 缓存] Java Cache之 Guava Cache的简单应用.

    前言 今天第一次使用MarkDown的形式发博客. 准备记录一下自己对Guava Cache的认识及项目中的实际使用经验. 一: 什么是Guava Guava工程包含了若干被Google的 Java项 ...