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 相关文章推荐
jquery text()要注意啦
Oct 30 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
详解Node.js使用token进行认证的简单示例
May 25 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
openPNE常用方法分享
2011/11/29 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
php 问卷调查结果统计
2015/10/08 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
详解VUE 数组更新
2017/12/16 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
token 机制和实现方式
2020/12/15 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
程序员岗位职责
2013/11/11 职场文书
房屋继承公证书
2014/04/10 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
财务会计岗位职责
2015/02/03 职场文书