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 面向对象编程 万物皆对象
Sep 17 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
JS之相等操作符详解
Sep 13 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
Node.js笔记之process模块解读
May 31 Javascript
layui表格内容溢出的解决方法
Sep 06 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 COOKIE设置为浏览器进程
2009/06/21 PHP
PHP 高级课程笔记 面向对象
2009/06/21 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
vue实现图片上传功能
2020/05/28 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
python批量下载图片的三种方法
2013/04/22 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
速记Python布尔值
2017/11/09 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
浅谈Python中的bs4基础
2018/10/21 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
python字典的值可以修改吗
2020/06/29 Python
历史学专业毕业生求职信
2013/09/27 职场文书
药物学专业学生的自我评价
2013/10/27 职场文书
《乌塔》教学反思
2014/02/17 职场文书
鸿星尔克广告词
2014/03/21 职场文书
借款担保书范文
2014/05/13 职场文书
年终奖发放方案
2014/06/02 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android