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

2023-10-30

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 type="text/JavaScript">
// 第二种方法加载页面:jQuery $.ajax
$(document).ready(function(){
  ajaxload('user_dashboard.html')
  function ajaxload(local){
      htmlobj=$.ajax({url:local,async:false});
      $(".contentRight").html(htmlobj.responseText);
  }
  $("#sidebar").find('li:eq(0)').click(function(){
      ajaxload('user_dashboard.html')
   return false;
  });
  
  $("#sidebar").find('li:eq(1)').click(function(){
    ajaxload('user_profile.html')
  return false;
  });
  
});

</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();
  }
    
    
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何加载HTML页面页面到另一个界面中 的相关文章

  • 什么是静态变量和静态方法?如何在Java中使用它们?什么是同步和异步?如何在Java中进行同步和异步编程?什么是单元测试?如何在Java中进行单元测试?

    单元测试是一种软件测试方法 它用于测试一个软件系统的最小可测试单元 在Java中 JUnit是最常用的单元测试框架之一 它提供了一些注解和断言 可以方便地编写和运行测试用例 除了JUnit之外 Mockito也是一个非常有用的测试框架 它允
  • (转) 如何将notepad++添加到右键

    工具 原料 win 7系统 Notepad 方法 步骤 左下角点击 开始 gt 运行 gt regedit 打开注册表编辑器 在HKEY CLASSSES ROOT Shell 下 在Shell下 新建项命名为Open With Notep
  • 卧槽,做Python兼职又接了一个大单,真香

    每年的第一季度 是Python兼职接单的高潮期 近段时间 各行业对爬虫类和数分类服务的需求量呈指数级的暴增 圈子里的朋友双休都没闲着 趁着旺季接单大赚一笔 所以 最近在csdn后台咨询技术变现 兼职接单问题的朋友也越来越多 最近十天收到了六
  • 【数据库原理及应用教程(第4版

    文章目录 一 选择题 二 填空题 三 简答题 Reference 一 选择题 1 2 3 4 5 6 7 8 9 10 C B D C D B A B D B 11 12 13 14 15 16 17 18 19 20 C D A D B
  • Spring启动执行流程梳理

    注 本文梳理启动流程使用的Spring版本 4 0 2 RELEASE 使用spring配置 都需要在web xml中配置一个spring的监听器和启动参数 context param 如下
  • 基于视觉的移动平台运动目标检测

    1 声明 本文为自己的研究总结 主要根据各类文献总结而来 内容上可能有些不全面 不客观 这篇博文主要介绍的是基于视觉的移动平台运动目标检测 写这篇博文的目的主要是对自己一个阶段性总结 也希望能够帮助做这方面研究的同学 2 引言 首先 我们来
  • Nacos + Prometheus + Grafana 搭建走起~

    小伙伴们好呀 这两天在本地搭建了这个 Nacos Prometheus Grafana 主要是为了这个 nacos 填坑 然后顺便搭下这个监控中心 哈哈 文章内容比较琐碎 看完你可以了解到 怎么选择 nacos 版本 可能会踩到的坑 没错
  • 一些概念的解释

    转移支付 财政转移支付是以各级政府之间所存在的财政能力差异为基础 以实现各地公共服务水平的均等化为主旨 而实行的一种财政资金转移或财政平衡制度 用人话说 就是大家一起收税 三分留地方 七分归国家 实际上不同税种比例不同 归国家的这些国家在根
  • DELL R740服务器系统安装详细过程

    RAID配置 1 开机F2进入bios 2 选择device setting 3 Integrated Raid controller 1 xxxxxx raid 卡型号 一般是第一行 4 选择 Main Menu
  • java中上传本地图片

    如果你想上传多张图片 http blog csdn net xuanzhangran article details 54929988 如果是上传单张如下 点击上传图片按钮 上传本地 效果如图 1 原始图框 2 点击预览 弹出本地弹框 3
  • PB调用windows api删除文件夹及其子文件夹或子文件

    创建nvo folder对象 forward global type nvo folder from nonvisualobject end type type shfileopstruct from structure within nv
  • Java线程:线程的交互

    本文转载至 http lavasoft blog 51cto com 62575 99157 线程交互是比较复杂的问题 SCJP要求不很基础 给定一个场景 编写代码来恰当使用等待 通知和通知所有线程 一 线程交互的基础知识 SCJP所要求的
  • 比较流行的响应式框架

    Bootstrap Foundation Semantic UI PureCSS 与君共勉 再牛逼的梦想 也抵不住傻逼般的坚持
  • Parser-Free Virtual Try-on via Distilling Appearance Flows代码解析

    从PF AFN test开始看 先看测试代码 1 test sh python test py name demo resize or crop None batchSize 1 gpu ids 0 参数 name resize or cr
  • 子组件自定义事件,父组件调用记录-

    方式一 1 子组件 p 某个事件 p methods a b是子组件自定义的事件名 this emit b 定义传给父组件的值 2 父组件调用 父组件定义 a a methods a e console log e 定义传给父组件的值 方式
  • 华为OD机试 - 运维日志排序(Java)

    题目描述 运维工程师采集到某产品线网运行一天产生的日志n条 现需根据日志时间先后顺序对日志进行排序 日志时间格式为H M S N H表示小时 0 23 M表示分钟 0 59 S表示秒 0 59 N表示毫秒 0 999 时间可能并没有补全 也
  • utils:常见的几种日期格式和转换方法

    一 UTC格式 国际统一时间 YYYYMMDD T HHMMSS Z 或者时区标识 T表示分隔符 Z表示的是UTC 相差北京时间8小时 2020 01 13T16 00 00 000Z 对应的北京时间 2020 01 14 00 00 00
  • 【计算机视觉】目标检测中Faster R-CNN、R-FCN、YOLO、SSD等算法的讲解(图文解释 超详细必看)

    觉得有帮助请点赞关注收藏 一 基于候选区域的目标检测算法 基于候选区域的深度卷积神经网络 Region based Convolutional Neural Networks 是一种将深度卷积神经网络和区域推荐相结合的物体检测方法 也可以叫
  • hdu 6069 Counting Divisors

    Problem acm hdu edu cn showproblem php pid 6069 Meaning 定义函数d n n 的因子个数 给定区间 l r 和常数 k 求 i lrd ik mod 998244353 sum r i
  • JAVA练习28-买卖股票的最佳时机‖

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 目录 前言 一 题目 1 题目描述 2 思路与代码 2 1 思路 2 2 代码 总结 前言 提示 这里可以添加本文要记录的大概内容 1月22日练习内容 提示 以下是本篇文章正

随机推荐

  • Adapter及其一些例子

    为了更好的理解Adapter我们这里先看一下接口的关系图 我们主要讲解就是BaseAdapter因为它同时继承了ListAdapter与spinnerAdapter 而且绝大部分的Adapter都继承它 Adapter的实现类如下 Arra
  • 决策树实现鸢尾花分类

    介绍 在这篇博客中 我们使用以下几个库来实现决策树算法 scikit learn机器学习库 scikit learn最先是由David Cournapeau在2007年发起的一个Google Summer of Code项目 从那时起这个项
  • JavaWeb问题解决:关于JSP中使用System类会出现服务器错误的情况

    浏览器显示的报错详情 报错代码 System out cannot be resolved to a type 无法为JSP编译类 这洋文的意思是说 System out不能被解析成类型 大致意思意思就是在JSP页面解析成为Servlet类
  • 一些数学符号

    阿尔法 贝塔 伽玛 德尔塔 伊普西隆 泽塔 伊塔 西塔 约塔 卡帕 兰姆达 米欧 纽 克西 欧米克隆
  • 第4题:请编写一个函数void fun(char *tt,int pp[]),统计在tt字符串中“a”到“z”26个字母各自出现的次数,并依次放在pp所指数组中。

    C试题 第4题 请编写一个函数void fun char tt int pp 统计在tt字符串中 a 到 z 26个字母各自出现的次数 并依次放在pp所指数组中 ChatGPT回答如下 主要考察了以下几个知识点 字符串的基本操作 在 C 语
  • 双峰逻辑映射【基于matlab的动力学模型学习笔记_7】

    仅当作学习笔记 若有纰漏欢迎友好交流指正 此外若能提供一点帮助将会十分荣幸 本文利用Lyapunov指数 着重从混沌特性展现双峰逻辑映射与逻辑映射之间的区别 所谓的一维双峰逻辑映射 是因为它在第一次迭代中会出现一个双峰 如下图所示 图1 双
  • java 数字范围正则_Java 正则表达式

    正则表达式 概述 正则表达式定义了字符串的模式 正则表达式可以用来搜索 编辑或处理文本 正则表达式并不仅限于某一种语言 但是在每种语言中有细微的差别 java util regex 包主要包括以下三个类 Pattern 类 pattern
  • 可转债网格交易策略回测

    什么是网格交易策略 基于股票波动高抛低吸策略 自动化反复买卖赚取差价 投资者借助条件单 把资金分成多份 从基准价开始 每跌x 就自动买入一份 每涨y 就自动卖掉一份 股价越波动高抛低吸的机会越多 什么是交易策略回测 设定了交易策略后 基于历
  • 安卓pos机开发!写给互联网大厂员工的真心话,附带学习经验

    前言 19年6月份从网易云音乐离开 放弃了留学机会 开始了人生的第一次创业 前后尝试了两个项目 因为个人能力与时机因素都失败了 虽然没能享受到创业所能够带来高杠杆物质上的回报 但是对个人软技能和自我边界认知上都有了很大的提升 对于这段经历有
  • [Error] invalid operands of types 'float' and 'int' to binary 'operator%' c错误

    错误提示告诉你 的所有两边 一个是整形 int 一个是浮点型 float 类型不匹配报错 所以你把应该把 其中一个变量定义成整形
  • 前端(node.js)调用dll动态链接库

    壹 需求 使用 js node 调用dll 动态链接库 github地址如下 包含dll 里面就一个Add方法暴露出来 github 贰 两种方式调用dll 当前开发环境 Windows 11 22H2 node v16 20 0 Pyth
  • logback配置日志

    logback的详细介绍网上有很多 http blog csdn net jibaole article details 52442694 参考文档 使用方法 当我们分清了log4j logback和slf4j的关系后 我们就可以使用它们了
  • [701]labelImg标注工具

    labelImg github https github com tzutalin labelImg exe下载 https tzutalin github io labelImg 用于深度网络训练的数据集做标注的方法和工具有好多 像Lab
  • dockerfile基于apline将JDK20打包成镜像

    dockerfile基于apline将JDK20打包成镜像 今天就来和大家聊聊如何把最新出版的JDK20打包成docker镜像 很多uu都会采用centos作为基础镜像 这么做会有一个问题 centos系统会含有很多库文件 这些库文件JDK
  • Visual Studio Code和IntelliJ IDEA运行spring boot项目

    纯前端 没有java经验 要运行一个spring boot项目 根据别人博文运行成功 现整理到本文 以更基础的方式写步骤 参考博文 超详细的VsCode创建SpringBoot项目 图文并茂 yd的博客 CSDN博客 一 Java环境配置
  • Pytorch多GPU训练:DataParallel和DistributedDataParallel

    引言 Pytorch有两种方法实现多GPU训练 分别是DataParallel DP 和DistributedDataParallel DDP DP实现简单 但没有完全利用所有GPU资源 DDP实现相对复杂 但是更快 我建议使用DDP DP
  • bert入门之分词源码解析

    bert编码方法 概括起来 就分词和id映射 我们先看一下分词的两个方法 一 BasicTokenizer 大致流程 转成 unicode gt 去除各种奇怪字符 gt 处理中文 gt 空格分词 gt 去除多余字符和标点分词 gt 再次空格
  • 国内就能用的Chat-GPT分享

    人工智能在语音理解与交互的新里程碑 AI聊天平台 在人工智能 AI 领域 语言模型的发展日新月异 这其中 OpenAI所推出的GPT系列语言模型尤为显眼 尤其是其中的一员 ChatGPT 已经在人工智能的语言理解与交互方面设定了一个新的里程
  • PB安装步骤

    安装PowerBuilder 9 0具体步骤 1 解压压缩包 双击 SETUP 2 点击 Next 3 点击 Yes 4 点击 Next 5 选择好安装到的文件夹 点击 Next 6 选择组件 我只选择PowerBuilder 点击 Nex
  • 如何加载HTML页面页面到另一个界面中

    1 第一种 iframe 但是 对于个人经验来说 iframe最好不要用 不仅自适应不太好 而且对于seo优化特别不好 2 第二种 通过jQuery load 事件加载页面 比较简单 但是会刷新界面 不过个人感觉影响不大 可以return