div 加载 html页面的方法

单页应用页面加载技巧

最新推荐文章于 2023-03-07 09:16:01 发布

转载最新推荐文章于 2023-03-07 09:16:01 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/mqxs/p/9973281.html

Javascript 同时被 2 个专栏收录

65 篇文章

订阅专栏

HTML

32 篇文章

订阅专栏

本文探讨了在单页面应用中使用div元素加载HTML页面的多种方法，包括使用iframe、object标签和jQuery的load方法，并对比了它们的优缺点。

div 加载 html页面的方法

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

1  <div class="main-container" id="main" style="width:99%">
2   <iframe src="diagrambuilder/dashboard/diagrambuilder/default.html" width="100%" height="800" frameborder="0">
3        您的浏览器不支持iframe，请升级
4   </iframe>
5   </div>

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

复制代码

1     <script>
2         function load_home() {
3 
4             document.getElementById("main").innerHTML = '<object type="text/html" data="diagrambuilder/dashboard/diagrambuilder/default.html" width="100%" height="600px"></object>';
5         }
6     </script>

复制代码

1 <a class="sub-link" href="javascript:load_home();">load html</a>

可以用此方法进行页面加载，而且该方法可以打开外网完整URL。

另外还有一种就是用jquery的load方法（该方法不能打开外网完整URL），但是测试后发现页面不能正常布局：

复制代码

 1 <!doctype html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>jQuery Load (js和css有问题？)</title>
 6         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 7         <script type="text/javascript">
 8             jQuery(function(){
 9                 jQuery('#loadPage').click(function(){
10                     jQuery('#pagecontainer').load('app/diagrambuilder/dashboard/diagrambuilder/default.html', 
11                             function(){alert('Content Successfully Loaded.')} 
12                     );
13                 });
14             })
15         </script>        
16     </head>
17     <body>
18         <a href="javascript:void(0)" id="loadPage">Click To Load Web Page</a><br/>
19         <div id="pagecontainer"></div>        
20     </body>
21 </html>

复制代码

我是用下面的方法的，最简单了（亲测可行，试了该方法不能打开外网完整URL）：

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
      <meta charset="UTF-8">
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script>
$(document).ready(function(){
    $('#head').load('info_inner.html');
})
</script>
</head>
<body>
<div id="head">

</div>
</body>