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 相关文章推荐
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
JavaScript数组去重的几种方法
Apr 07 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
PHP获取url的函数代码
2011/08/02 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
JS中的三个循环小结
2017/06/20 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
网上开店必备创业计划书
2014/01/26 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
体育教学随笔感言
2014/02/24 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
商业融资计划书
2014/04/29 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书