JavaScript实现获取远程的html到当前页面中


Posted in Javascript onMarch 26, 2017

html代码

<div id="includeHtml"></div>

javascript代码

function clientSideInclude(id, url) {
  var req = false;
  // Safari, Firefox, 及其他非微软浏览器
  if (window.XMLHttpRequest) {
    try {
      req = new XMLHttpRequest();
    } catch (e) {
      req = false;
    }
  } else if (window.ActiveXObject) {

    // For Internet Explorer on Windows
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        req = false;
      }
    }
  }
  var element = document.getElementById(id);
  if (!element) {
    alert("函数clientSideInclude无法找到id " + id + "。" +
      "你的网页中必须有一个含有这个id的div 或 span 标签。");
    return;
  }
  if (req) {
    // 同步请求,等待收到全部内容
    req.open('GET', url, false);
    req.send(null);
    if (req.status == 404) {
      clientSideInclude(id, 'error.html')
    } else {
      element.innerHTML = req.responseText;
    }
  } else {
    element.innerHTML =
      "对不起,你的浏览器不支持" +
      "XMLHTTPRequest 对象。这个网页的显示要求" +
      "Internet Explorer 5 以上版本, " +
      "或 Firefox 或 Safari 浏览器,也可能会有其他可兼容的浏览器存在。";
  }
}

clientSideInclude(includeHtml, "http://XXXXX.html");//页面中的一个div的id为includeHtml

用法很简单,代码里已经注释了,这里在简单描述下,给那些不看注释的人看吧

js代码在当前页面加载或者做成js文件加载进来,然后远端的代码会自动写入到当前页面里id号为 includehtml的DIV里面

Javascript 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
javascript闭包的理解和实例
Aug 12 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
jquery实现网页定位导航
Aug 23 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
微信小程序工具函数封装
Oct 28 Javascript
axios学习教程全攻略
Mar 26 #Javascript
js oncontextmenu事件使用详解
Mar 25 #Javascript
js 函数式编程学习笔记
Mar 25 #Javascript
CodeMirror js代码加亮使用总结
Mar 25 #Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 #Javascript
在js中做数字字符串补0(js补零)
Mar 25 #Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 #Javascript
You might like
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
Python随机生成彩票号码的方法
2015/03/05 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
西部世纪.net笔试题面试题
2014/04/03 面试题
在校生钳工实习自我鉴定
2013/09/19 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android