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图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
JavaScript前后端JSON使用方法教程
Nov 23 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中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
护士自我介绍信
2014/01/13 职场文书
新春文艺演出主持词
2014/03/27 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
2015年父亲节寄语
2015/03/23 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
深入理解pytorch库的dockerfile
2022/06/10 Python