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 相关文章推荐
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
JS实现随机点名器
Apr 12 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&amp;&amp;mysql)三
2006/10/09 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
使用python在本地电脑上快速处理数据
2017/06/22 Python
python实现zabbix发送短信脚本
2018/09/17 Python
实例讲解python中的协程
2018/10/08 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
生产现场工艺工程师岗位职责
2013/11/28 职场文书
高中校园广播稿
2014/01/11 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
授权委托书范本
2014/04/03 职场文书
火烧圆明园观后感
2015/06/03 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
Python中的pprint模块
2021/11/27 Python
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android