Javascript Widget的两个实例只有一个实例在工作

我有一个只适用于一个实例的小部件

我的问题是，如果我在一个页面上有一个小部件实例，它就可以正常工作。如果页面上有多个实例，则只有一个实例有效。第二个实例不起作用

您可以查看此页面以获取示例

从我的故障排除中，我注意到以下几点 1.第二个实例的放置ID不会传递给脚本。 2.即使使用了默认的placement ID，我也会得到一个错误 “未捕获引用错误：未定义jsonpCallback”。 不幸的是，定义了jsonpCalback，因为第一个脚本可以工作

这是我的密码。。 小部件

<script placementID = "37"     src="placement.js" type="text/javascript">    </script> 
<div id="widget-container_37"></div> 

----这条线下的第二个实例-------

现在是.JS文件

(function() {
 // Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src",
    "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
if (script_tag.readyState) {
  script_tag.onreadystatechange = function () { // For old versions of IE
      if (this.readyState == 'complete' || this.readyState == 'loaded') {
          scriptLoadHandler();
      }
  };
} else {
  script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
main(); 
}

/******** Our main function ********/
function main() { 
jQuery(document).ready(function($) { 
    /******* Load CSS *******/
   /** var css_link = $("<link>", { 
        rel: "stylesheet", 
        type: "text/css", 
        href: "style.css" 
    });
    css_link.appendTo('head');  
   /**** get host name ***/
  var site_name = window.location.hostname;


    /****** get user ID******/
  var this_js_script = $('script[src*=placement]'); // get file name..*/
  var placementID = this_js_script.attr('placementID');  
  /**var placementID = document.getElementById("adblabla_2").getAttribute("placementID");**/
  if (typeof placementID === "undefined" ) {
     var placementID = '23';

  }

    /******* Load HTML *******/

  $.ajax({
        url: 'processors/processor.php?placementID='+placementID,
        data: {name: 'Chad', site: site_name},
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback: 'jsonpCallback',
        success: function(data){
           //alert(placementID);
           $('#widget-container_'+placementID).html(data.message);

        }
    });


});
  function jsonpCallback(data){
 $('#widget-container_2').text(data.message);

 }

}

})();

（函数（）{
//本地化jQuery变量
var-jQuery；
/********如果不存在jQuery，则加载它*********/
if（window.jQuery==undefined | | window.jQuery.fn.jQuery！=='1.4.2'）{
var script_tag=document.createElement（'script'）；
script_tag.setAttribute（“type”、“text/javascript”）；
script_tag.setAttribute（“src”，
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
if（script_tag.readyState）{
script_tag.onreadystatechange=function（）{//用于旧版本的IE
如果（this.readyState=='complete'| | this.readyState=='loaded'）{
scriptLoadHandler（）；
}
};
}否则{
script_tag.onload=scriptLoadHandler；
}
//尝试查找头部，否则默认为documentElement
（document.getElementsByTagName（“head”）[0]| | document.documentElement）.appendChild（script_标记）；
}否则{
//窗口上的jQuery版本就是我们想要使用的版本
jQuery=window.jQuery；
main（）；
}
/********加载jQuery后调用******/
函数scriptLoadHandler（）{
//将$和window.jQuery恢复为其以前的值并存储
//本地jQuery变量中的新jQuery
jQuery=window.jQuery.noConflict（true）；
//调用我们的主要函数
main（）；
}
/********我们的主要职能********/
函数main（）{
jQuery（文档）.ready（函数（$）{
/*******加载CSS*******/
/**var css_link=$（“”，{
rel:“样式表”，
键入：“文本/css”，
href:“style.css”
});
css_link.appendTo（'head'）；
/****获取主机名***/
var site_name=window.location.hostname；
/******获取用户ID******/
var this_js_script=$（'script[src*=placement]'）；//获取文件名*/
var placementID=this_js_script.attr（'placementID'）；
/**var placementID=document.getElementById（“adblabla_2”）.getAttribute（“placementID”）**/
如果（位置ID的类型==“未定义”）{
变量placementID='23'；
}
/*******加载HTML*******/
$.ajax({
url:'processors/processor.php？placementID='+placementID，
数据：{name:'Chad'，site:site_name}，
数据类型：“jsonp”，
jsonp:“回调”，
jsonpCallback:'jsonpCallback'，
成功：功能（数据）{
//警报（placementID）；
$（'#widget-container'+placementID）.html（data.message）；
}
});
});
函数jsonpCallback（数据）{
$（'#widget-container_2'）.text（data.message）；
}
}
})();

原因是另一个，然后我想，您的代码已经封装好了，因此它没有调用两次相同的主函数，但它找到了两次相同的脚本标记，因此我认为得到了错误的参数。 您可以尝试以下代码：

(function () {
    // Localize jQuery variable
    var jQuery,
        //get current script
        currentScript = document.currentScript || (function () {
            var scripts = document.getElementsByTagName('script');
            return scripts[scripts.length - 1];
        })();

    /******** Load jQuery if not present *********/
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src",
            "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
        if (script_tag.readyState) {
            script_tag.onreadystatechange = function () { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                    scriptLoadHandler();
                }
            };
        } else {
            script_tag.onload = scriptLoadHandler;
        }
// Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    } else {
// The jQuery version on the window is the one we want to use
        jQuery = window.jQuery;
        main();
    }

    /******** Called once jQuery has loaded ******/
    function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
        jQuery = window.jQuery.noConflict(true);
// Call our main function
        main();
    }

    /******** Our main function ********/
    function main() {
        jQuery(document).ready(function ($) {
            /******* Load CSS *******/
            /** var css_link = $("<link>", {
        rel: "stylesheet",
        type: "text/css",
        href: "style.css"
    });
             css_link.appendTo('head');
             /**** get host name ***/
            var site_name = window.location.hostname;


            /****** get user ID******/
            var this_js_script = $(currentScript); // get file name..*/
            var placementID = this_js_script.attr('placementID');
            /**var placementID = document.getElementById("adblabla_2").getAttribute("placementID");**/
            if (typeof placementID === "undefined") {
                var placementID = '23';

            }

            /******* Load HTML *******/

            $.ajax({
                url: 'processors/processor.php?placementID=' + placementID,
                data: {name: 'Chad', site: site_name},
                dataType: 'jsonp',
                jsonp: 'callback',
                success: function (data) {
                    //alert(placementID);
                    $('#widget-container_' + placementID).html(data.message);

                }
            });


        });
        function jsonpCallback(data) {
            $('#widget-container_2').text(data.message);

        }

    }

})();

（函数（）{
//本地化jQuery变量
var jQuery，
//获取当前脚本
currentScript=document.currentScript | |（函数（）{
var scripts=document.getElementsByTagName（'script'）；
返回脚本[scripts.length-1]；
})();
/********如果不存在jQuery，则加载它*********/
if（window.jQuery==undefined | | window.jQuery.fn.jQuery！=='1.4.2'）{
var script_tag=document.createElement（'script'）；
script_tag.setAttribute（“type”、“text/javascript”）；
script_tag.setAttribute（“src”，
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
if（script_tag.readyState）{
script_tag.onreadystatechange=function（）{//用于旧版本的IE
如果（this.readyState=='complete'| | this.readyState=='loaded'）{
scriptLoadHandler（）；
}
};
}否则{
script_tag.onload=scriptLoadHandler；
}
//尝试查找头部，否则默认为documentElement
（document.getElementsByTagName（“head”）[0]| | document.documentElement）.appendChild（script_标记）；
}否则{
//窗口上的jQuery版本就是我们想要使用的版本
jQuery=window.jQuery；
main（）；
}
/********加载jQuery后调用******/
函数scriptLoadHandler（）{
//将$和window.jQuery恢复为其以前的值并存储
//本地jQuery变量中的新jQuery
jQuery=window.jQuery.noConflict（true）；
//调用我们的主要函数
main（）；
}
/********我们的主要职能********/
函数main（）{
jQuery（文档）.ready（函数（$）{
/*******加载CSS*******/
/**var css_link=$（“”{
rel:“样式表”，
键入：“文本/css”，
href:“style.css”
});
css_link.appendTo（'head'）；
/****获取主机名***/
var site_name=window.location.hostname；
/******获取用户ID******/
var this_js_script=$（currentScript）；//获取文件名*/
var placementID=this_js_script.attr（'placementID'）；
/**var placementID=document.getElementById（“adblabla_2”）.getAttribute（“placementID”）**/
如果（位置ID的类型==“未定义”）{
变量placementID='23'；
}
/*******加载HTML*******/
$.ajax({
url:'处理器/处理器
(function () {
    // Localize jQuery variable
    var jQuery,
        //get current script
        currentScript = document.currentScript || (function () {
            var scripts = document.getElementsByTagName('script');
            return scripts[scripts.length - 1];
        })();

    /******** Load jQuery if not present *********/
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src",
            "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
        if (script_tag.readyState) {
            script_tag.onreadystatechange = function () { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                    scriptLoadHandler();
                }
            };
        } else {
            script_tag.onload = scriptLoadHandler;
        }
// Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    } else {
// The jQuery version on the window is the one we want to use
        jQuery = window.jQuery;
        main();
    }

    /******** Called once jQuery has loaded ******/
    function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
        jQuery = window.jQuery.noConflict(true);
// Call our main function
        main();
    }

    /******** Our main function ********/
    function main() {
        jQuery(document).ready(function ($) {
            /******* Load CSS *******/
            /** var css_link = $("<link>", {
        rel: "stylesheet",
        type: "text/css",
        href: "style.css"
    });
             css_link.appendTo('head');
             /**** get host name ***/
            var site_name = window.location.hostname;


            /****** get user ID******/
            var this_js_script = $(currentScript); // get file name..*/
            var placementID = this_js_script.attr('placementID');
            /**var placementID = document.getElementById("adblabla_2").getAttribute("placementID");**/
            if (typeof placementID === "undefined") {
                var placementID = '23';

            }

            /******* Load HTML *******/

            $.ajax({
                url: 'processors/processor.php?placementID=' + placementID,
                data: {name: 'Chad', site: site_name},
                dataType: 'jsonp',
                jsonp: 'callback',
                success: function (data) {
                    //alert(placementID);
                    $('#widget-container_' + placementID).html(data.message);

                }
            });


        });
        function jsonpCallback(data) {
            $('#widget-container_2').text(data.message);

        }

    }

})();