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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
13个PHP函数超实用
Oct 21 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
利用JS实现数字增长
Jul 28 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
js+html制作简单验证码
Feb 16 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
php适配器模式介绍
2012/08/14 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
两种php实现图片上传的方法
2016/01/22 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python读取csv文件分隔符设置方法
2019/01/14 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
python 发送json数据操作实例分析
2019/10/15 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
数学系个人求职信范文
2014/01/30 职场文书
倡议书作文
2015/01/19 职场文书
离婚协议书范文2015
2015/01/26 职场文书
北京爱情故事观后感
2015/06/12 职场文书
入党后的感想
2015/08/10 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
XX部保密工作制度范本
2019/08/27 职场文书