[前端引用] 利用ajax实现类似php include require 等命令的功能
利用ajax实现类似php中的include、require等命令的功能
https://github.com/myfancy/ajaxInclude
建议去这里阅读readme-2.0.md。
后续这里不再更新。
下面的都是之前写的，没必要读了。
-------更新2015.9.28
这才是真正的jquery插件的写法。
分析：假设当前页面index.hlml 通过ajaxInclude引入了 inc_yd.html。inc_yd.html需要jquery代码支持。并且是在相应的dom加载完毕后才能执行。
那么如果该代码写在common.js中，一般调用方法都是这样写的:$(document).ready(function(//相关代码){});
common.js和ajaxInclude.js都在index.html中引入。
最终结果是不执行的。因为$(document).ready()在index.html的自身的dom加载完成之后，ajaxInclude()方法执行之前就加载了。
第一次想到的解决办法是：在inc_yd.html中引入相关common.js。这样看似可以解决了，但是如果common.js还在index.html中有引入。那么就会引入两份common.js接入到页面。如果common.js中的方法没有通过js插件的方法书写，有可能会导致相同的方法执行两次，比如一个alert事件弹多次窗，一个数字加按钮点击后，加2个数。
第二个方法（现在刚刚想到的一个办法）就是想inc_yd.html中需要的js直接想到它的页面上，其他的地方不在出现。这样可以完美解决问题？
第三个想到的办法是：通过不通过$(document).ready()来调用inc_yd.html的方法，而是通过$(window).load()来调用方法，那么就会等到整个页面完全加载完毕之后才会触发该方法。此方法不适合网站开发使用，只适合前端开发使用。后台开发通过后台的方法引入了inc_yd.html后应该将该调用方法改为$(document).ready()触发，不然每次等整个页面包括图片下载完成之后在执行，有点太慢了。
总结：
第一个方法不推荐，被引用页面的js和其他的js混合在一起导致页面代码各种重复执行，各种奇葩bug，
第二个方法其实是将相应代码抽出来单独放置了。
第三个后台开发还要让人家修改代码。
所以推荐第二个方法，直接将js代码写入到被引用页面中，而不是通过<script src="">来引入
如果特殊时刻，可以通过第三个方法来快速解决问题。
如果觉得不好管理js的话，可以将对应的方法插件化，然后将调用方法写到被应用页面中。
参考hhkx项目
/** * Created by 幻想家 on 2015/7/2. * ajaxInclude方法。 * 版本更新：201509230909（采用jquery插件的方式写） * 使用方法： <script id="ieAlert" type="text/javascript"> $('#ieAlert').ajaxInclude('inc_ieAlert.html'); </script> * 更新须知：之前的版本会导致页面因为load方法，多次触发页面中$(document).ready();导致其内部的方法被多次触发，那个带按钮的计算价格的 * 输入框组件就是例证，这次的更新不知道能不能解决该问题，有待验证！（猜测还是解决不了）2015.9.23.9:23 * add：问题已解决，不知道是这个方法插件化，还是那个计算价格组件的方法插件化搞好的。 * * 版本：v201509111553 * 模拟php的include功能，通过ajax load()实现。 * 注意：只能在网站环境下运行，在文件夹中直接双击运行是会报错的。 * scriptID:代表当前script节点的id * includeFile:代表引入的文件，可以包括路径 * 使用方法： * <head>中引入： <script type="text/javascript" src="js/jquery.ajaxInlcude.js"></script> * 需要的位置写它：(id可以自定义，但不能重复哦) <script id="CustomIDNotSame" type="text/javascript"> $(document).ready( ajaxInclude('CustomIDNotSame','head.html') ); </script> * 代码可以更简单一点： <script id="CustomIDNotSame" type="text/javascript"> $(ajaxInclude('CustomIDNotSame','head.html')); </script> * 在需要引入的地方，书写上面的代码。 * 1、需要给script节点添加id，这方法时通过id来判断include到的页面位置的。 * 2、一个页面多次应用，id一定不要重复。 * 3、把被引入的html文件称为子页面，主动引入的称为母页面，母页面的css可以直接影响到子页面的dom， * 但是母页面的js是检测不到子页面的dom的，所以如果子页面上需要用js交互功能的话，把相应的js代码引入或写入的子页面的文件中。 * 子页面可以直接写dom和js，不需要写css和网页的<html>和<head>等，只需要写<body>标签内部的代码即可 * */ ; (function($) { $.fn.ajaxInclude = function(includeFile) { var scriptID = $(this).attr('id'); //通过js创建外层div，位置是当前script节点前方，所以一个页面中多次引用时需要使用不同的id $(this).before('<div id='+scriptID+'-tempWrap'+'></div>'); //在创建的div中，通过ajax load()引入指定html文件 //添加回调函数，处理一些问题并捕捉异常 $("#"+scriptID+'-tempWrap').load(includeFile,function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") { //可以在这里删除有碍观瞻的自身script节点，表担心，不影响函数执行 $(this).next().remove(); //没错，这就是传说中的去壳大法！ $(this).children().unwrap(); }else if(statusTxt=="error") { $(this).html("<h1 style='font-size: 25px'>此处组件加载失败！</h1>"); console.log("ajaxInclude.js执行错误————"+xhr.status + "：" + xhr.statusText); } }); }; })(jQuery); //; //function ajaxInclude(scriptID,includeFile){ // //通过js创建外层div，位置是当前script节点前方，所以一个页面中多次引用时需要使用不同的id // $("#"+scriptID).before('<div id='+scriptID+'-tempWrap'+'></div>'); // //在创建的div中，通过ajax load()引入指定html文件 // //添加回调函数，处理一些问题并捕捉异常 // $("#"+scriptID+'-tempWrap').load(includeFile,function(responseTxt,statusTxt,xhr){ // if(statusTxt=="success") { // //可以在这里删除有碍观瞻的自身script节点，表担心，不影响函数执行 // $(this).next().remove(); // //没错，这就是传说中的去壳大法！ // $(this).children().unwrap(); // }else if(statusTxt=="error") { // $(this).html("<h1 style='font-size: 25px'>此处组件加载失败！</h1>"); // alert("Error: " + xhr.status + ": " + xhr.statusText); // } // }); //}
-------更新2015.7.2
把它插件化了，这样使用更加方便：
将下面代码拷贝至新建的js文件中，然后引入页面即可。推荐命名：jquery.ajaxInclude.js
/** * Created by 幻想家 on 2015/7/2. * ajaxInclude方法。 * 模拟php的include功能，通过ajax load()实现。 * 注意：只能在网站环境下运行，在文件夹中直接双击运行是会报错的。 * a:代表当前script节点的id * b:代表引入的文件，可以包括路径 * 使用方法： * <head>中引入： * <script src="js/jquery.ajaxInlcude.js" type="text/javascript"></script> * 需要的位置写它：(id可以自定义，但不能重复哦) * <script id="include-header" type="text/javascript"> * $(document).ready( * ajaxInclude('include-header','head.html') * ); * </script> * 在需要引入的地方，书写上面的代码。 * 1、需要给script节点添加id，这方法时通过id来判断include到的页面位置的。 * 2、一个页面多次应用，id一定不要重复。 * 3、把被引入的html文件称为子页面，主动引入的称为母页面，母页面的css可以直接影响到子页面的dom， * 但是母页面的js是检测不到子页面的dom的，所以如果子页面上需要用js交互功能的话，把相应的js代码引入或写入的子页面的文件中。 * 子页面可以直接写dom和js，不需要写css和网页的<html>和<head>等，只需要写<body>标签内部的代码即可 * */ ; function ajaxInclude(a,b){ //通过js创建外层div，位置是当前script节点前方，所以一个页面中多次引用时需要使用不同的id $("#"+a).before('<div id='+a+'-wrap'+'></div>'); //在创建的div中，通过ajax load()引入指定html文件 //添加回调函数，处理一些问题并捕捉异常 $("#"+a+'-wrap').load(b,function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") { //可以在这里删除有碍观瞻的自身script节点，表担心，不影响函数执行 $(this).next().remove(); //没错，这就是传说中的去壳大法！ $(this).children().unwrap(); }else if(statusTxt=="error") { $(this).html("<h1 style='font-size: 50px'>此处组件加载失败！</h1>"); alert("Error: " + xhr.status + ": " + xhr.statusText); } }); }
--------2015.7.2之前
需求介绍
在写页面的时候，一个导航可能N页面要用到，每一个页面都需要复制粘贴一份进去，一旦有改动html代码的需求就苦逼了，每个都得改一遍。如果这个需求还很多，反复改，那简直就是折磨人啊（虽然这种情况一般的情况下遇不到，但是偶老是遇到。）
直接看代码
<script id="ajax-header" type="text/javascript"> //通过js创建外层div，位置是当前script节点前方，所以一个页面中多次引用时需要使用不同的id $("#ajax-header").before('<div id="include-head"></div>'); //在创建的div中，通过ajax load()引入 $(document).ready(function(){ //添加回调函数，处理一些问题并捕捉异常 $("#include-head").load("head.html",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") { //可以在这里删除有碍观瞻的自身sript节点，表担心，不影响函数执行 $(this).next().remove(); //没错，这就是传说中的去壳大法！ $(this).children().unwrap(); }else if(statusTxt=="error") { $(this).html("<h1 style='font-size: 50px'>此处组件加载失败！</h1>"); alert("Error: " + xhr.status + ": " + xhr.statusText); } }); }); </script>
把头部代码写到 head.html中，这样其他页面直接通过上方代码引用就可以了。我觉得也可以把上面整理成一个方法，此处直接传参调用即可，有空再搞吧。
需要注意的是，head.html中如果只写html结构代码，那么样式是可以应用到这些结构上的，但是如果是动态的，js貌似不行。必须把js一块搞进去。
如果是用前端框架，如amazeUI，实测不行，必须整个页面带<html><head>引入才行
但那样又会重复渲染样式，可以试试将关键性js引入。（待测试）
为什么不用iframe？
忘了。当时不知道考虑了啥，所以没用。以后再说
add：因为，高度宽度等不好处理，效果完全不行。
还是慢慢钻研吧，听说某些前端框架等可以直接支持这个功能，那就好了。
add：只能通过建立站点来实现ajax load方法，不然会报错
