[前端引用] 利用ajax实现相似php include require 等命令的功能

时间  2019-11-11
标签 前端 引用 利用 ajax 实现 相似 php include require 命令 功能 栏目 Ajax 繁體版
原文   原文链接

 利用ajax实现相似php中的include、require等命令的功能javascript

最新文件下载：
php

https://github.com/myfancy/ajaxIncludecss

建议去这里阅读readme-2.0.md。html

后续这里再也不更新。前端

下面的都是以前写的，不必读了。java

 

-------更新2015.9.28jquery

这才是真正的jquery插件的写法。git

分析：假设当前页面index.hlml 经过ajaxInclude引入了 inc_yd.html。inc_yd.html须要jquery代码支持。而且是在相应的dom加载完毕后才能执行。github

那么若是该代码写在common.js中，通常调用方法都是这样写的:$(document).ready(function(//相关代码){}); ajax

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>
 * 在须要引入的地方，书写上面的代码。
 * 一、须要给script节点添加id，这方法时经过id来判断include到的页面位置的。
 * 二、一个页面屡次应用，id必定不要重复。
 * 三、把被引入的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>
 * 在须要引入的地方，书写上面的代码。
 * 一、须要给script节点添加id，这方法时经过id来判断include到的页面位置的。
 * 二、一个页面屡次应用，id必定不要重复。
 * 三、把被引入的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方法，否则会报错

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程