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 新浪背投广告实现代码
Jul 07 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
react antd表格中渲染一张或多张图片的实例
Oct 28 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
Content-type 的说明
2006/10/09 PHP
十天学会php之第五天
2006/10/09 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
Django日志及中间件模块应用案例
2020/09/10 Python
python实现感知机模型的示例
2020/09/30 Python
高职助产应届生自荐信
2013/09/24 职场文书
大学生怎样进行自我评价
2013/12/07 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
学习计划书怎么写
2014/09/15 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL