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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
百度地图api如何使用
Aug 03 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
树结构之JavaScript
Jan 24 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 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实现Ftp用户的在线管理的代码
2007/03/06 PHP
分享3个php获取日历的函数
2015/09/25 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
php 中的closure用法详解
2017/06/12 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
Django自定义manage命令实例代码
2018/02/11 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
使用python接入微信聊天机器人
2020/03/31 Python
python将时分秒转换成秒的实例
2019/12/07 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
python suds访问webservice服务实现
2020/06/26 Python
python读取xml文件方法解析
2020/08/04 Python
python调用百度API实现人脸识别
2020/11/17 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
中秋寄语大全
2014/04/11 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
食品质检员岗位职责
2015/04/08 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技