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(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
javascript时间函数基础介绍
Mar 28 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
详解JS模块导入导出
Dec 20 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
jquery插件实现悬浮的菜单
Apr 24 jQuery
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 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
mac下安装nginx和php
2013/11/04 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python+django实现简单的文件上传
2016/08/17 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
python 图像增强算法实现详解
2021/01/24 Python
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
自荐信的两点禁忌
2013/10/30 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android