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 相关文章推荐
js停止输出代码
Jul 20 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
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设计模式之结构模式的深入解析
2013/06/13 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
浅谈js的异步执行
2016/10/18 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
python模块之StringIO使用示例
2015/04/08 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
Pycharm修改python路径过程图解
2020/05/22 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
篮球社团活动总结
2014/06/27 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
中秋节晚会开场白
2015/05/29 职场文书
冰雪公主观后感
2015/06/16 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
python本地文件服务器实例教程
2021/05/02 Python
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python