如何加载HTML页面页面到另一个界面中

1.第一种：iframe 但是，对于个人经验来说，iframe最好不要用，不仅自适应不太好，而且对于seo优化特别不好

2.第二种：通过jQuery load 事件加载页面。比较简单，但是会刷新界面。不过个人感觉影响不大，可以return false 组织界面刷新。

$(function(){
   var aHomePageLi = $('.sidebar-nav').find('ul').find('li');
   $('.contentRight').load('user_dashboard.html');   //.把user_dashboard.html界面加载到contentRight的div中
   aHomePageLi.eq(0).click(function(){
       $('.contentRight').load('user_dashboard.html');
       return false
   })
   aHomePageLi.eq(1).click(function(){
       $('.contentRight').load('user_profile.html');
       return false
   })
})

3.第三种：通过jQuery 中的$.ajax() 异步刷新；个人感觉最好用的一种，既不刷新界面，各个js功能也能正常加载实现

</script>

4.第四种：通过js中的Ajax进行异步刷新，但是有一个问题，被加载过来的界面中的js不能使用，只能把html界面加载过来，但是js加载不过来。但是可以动态创建script标签在需要的地方把js加载过来即可

window.οnlοad=function(){
   var oContentRight=document.getElementById('contentRight');
   var osidebar = document.getElementById('sidebar');
   var ali = osidebar.getElementsByTagName('li');

   ajaxLoad(oContentRight,'user_dashboard.html');
   ali[0].onclick = function(){
       ajaxLoad(oContentRight,'user_dashboard.html');
       return false;
   };
   ali[1].onclick = function(){
       ajaxLoad(oContentRight,'user_profile.html');

var oScript = document.createElement('script');
oScript.src = 'javascript/user.js';
document.body.appendChild(oScript);

return false;
   };
      function ajaxLoad(shopId,url){
      var xhr='';
      if (window.XMLHttpRequest){
       xhr=new XMLHttpRequest();
       }else{
          xhr=new ActiveXObject("Microsoft.XMLHTTP");
       }

       xhr.onreadystatechange=function(){
       if(xhr.readyState==4){
           if(xhr.status==200){
              shopId.innerHTML = xhr.responseText;
           }
          }
       }
      xhr.open('get',url,true);
      xhr.send();
}


}

如何加载HTML页面页面到另一个界面中相关推荐

Webview--如何让加载进来的页面自适应手机屏幕分辨率居中显示
让Webview加载的页面居中显示有我知道的俩种方法第一种: [java] WebSettings settings = webView.getSettings(); settings.setL ...
html中加载解析,HTML页面加载和解析流程详细介绍
序言: 我一直都认为"网页制作"这个词是一个不怎么高端的词,在我的印象中网页制作的词是没有生命力的一个制作,我喜欢用HTML 这样简单直接,这词凸显高端,有大气漂亮的UI.一套完美 ...
C#实现网页加载后将页面截取成长图片 | Playwright版
前言如何将网页生成预览图? 要实现这个功能,可以用WebBrowser组件模拟浏览器,或者使用系统浏览器访问网页,再进行截图操作. 但是,这样需要编写大量的控制代码. 工欲善其事,必先利其器! 利用 ...
服务器图片加载慢_页面提高性能利器_懒加载
哈喽,艾瑞巴蒂,现在搜狗商城产品需求已经趋于稳定,已经开始逐步的着手进行页面的性能提升工作.这不最近小编正在进行"页面懒加载需求"的功能测试.小编第一次听说这个名词,让我们一起了解 ...
Webview--如何让加载进来的页面自适应手机屏幕分辨率
让Webview加载的页面居中显示有我知道的俩种方法第一种: [java] view plaincopy WebSettings settings = webView.getSettings(); ...
Android插件化——加载其他APP页面
Android插件化--加载其他APP页面 1.分析 2.优点 3.详细过程 3.1 标准化加载接口 3.2待加载的APP-B 3.3 APP-A 主加载工程 3.3.1 加载工具类PlugManag ...
php项目css加载失败,CSS页面加载失败的原因有哪些
CSS加载失败的常见原因有:路径错误.浏览器不兼容.网络原因.编码格式不同等错误才刚刚入门CSS,经常会碰到CSS加载失败的问题,网页上什么样式都没有,今天将要和大家分享的是常见的CSS加载失败的原 ...
c# 实现网页加载后将页面截取为长图片
背景最近再做一个需求,需要对网页生成预览图,如下图但是网页千千万,总不能一个个打开,截图吧:于是想着能不能使用代码来实现网页的截图.其实要实现c#教程这个功能,无非就是要么实现一个仿真浏览器,要么 ...
JavaScript获取页面加载时间和页面停留时间
JavaScript获取页面加载时间和页面停留时间 var duration = 0; //停留时间 var loadingTime = 0; //加载时间 var startTime = Math. ...
电脑桌面只剩回收站和计算机,如果计算机重新加载后，桌面上只有一个回收站，该怎么办？...
如果计算机重新加载后,桌面上只有一个回收站,该怎么办?计算机只显示如何恢复回收站. 如果计算机重新加载后,桌面上只有一个回收站,该怎么办? 由于它提示我们目录c : \ windows \ sys ...

如何加载HTML页面页面到另一个界面中

如何加载HTML页面页面到另一个界面中相关推荐

最新文章

热门文章