Question

我正在编写一个引用另一个插件的jQuery插件，在调用我的插件时动态添加对该插件的引用：

var headID = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'js/jquery.genericplugin.js';
document.body.appendChild(script);

要调用此插件，我在头标记中使用以下内容：

<script type="text/javascript" src="path/to/myplugin.js" />
<script type="text/javascript">
    $(document).ready(function() {
        $('#object').myplugin({
            option1: 1,
            option2: 2
         });
    });
</script>

我已经在一个页面上成功测试了这个，但是我正在尝试更新另一个使用该代码的页面并且我一直在获取文档正文为null错误。我假设这是因为在我的插件尝试将脚本添加到它之前，主体尚未加载。我更改了我的页面代码，以便对插件的引用也在文档就绪事件中。

<script type="text/javascript">
    $(document).ready(function() {
        var headID = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'path/to/myplugin.js';
        document.body.appendChild(script);

        $('#object').myplugin({
            option1: 1,
            option2: 2
         });
    });
</script>

我不再获取文档正文为空错误，但是我收到错误告诉我$('#object').myplugin is not a function 该页面是一个混乱，我已经验证我在页面的标题中添加信息...所以我有点不知所措。我很确定我知道发生了什么，但不知道为什么或解决方案。

修改这是我的插件的样子：

(function($) {
 var headID = document.getElementsByTagName('head')[0];
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = 'js/jquery.genericplugin.js';
 document.body.appendChild(script);

 $('.diag-close').live('click', function() {
  $.modal.close();
 });

 $.fn.photomodal = function(options) {

  var defaults = {
   iframeUrl: '',
   imageName: '',
   linkID: '',
   photoID: ''
  };

  var opts = $.extend(defaults, options);

  return this.each(function() {
   $this = $(this);

   $this.click(function() {
    buildModal({
     iframeUrl: opts.iframeUrl,
     photoID: opts.photoID,
     imageName: opts.imageName
    });
   });
  });
 };


 function buildModal(options) {
  var img = new Image();
  img.src = 'http://www.gravatar.com/avatar/' + options.imageName;

  var h = img.height + 310;
  var w = img.width + 110;

  var defaults = {
   bgcolor: '#fff',
   border: '4px solid #3B5998',
   height: h,
   width: w,
   padding: 0,
   top: 15,
   photoID: 'photoThumb'
  };
  var opts = $.extend(defaults, options);
  $.modal('<iframe src="' + opts.iframeUrl + '" height="' + opts.height + '" width="' + opts.width + '" style="border: 0" scrolling="no">', {
   closeHTML: '<img src="x.png" alt="close" style="cursor: pointer; float: right;" />',
   containerCss: {
    'background-color': opts.bgcolor,
    'border': opts.border,
    'height': opts.height + 10,
    'width': opts.width + 20,
    'padding': opts.padding,
    'top': opts.top
   },
   onClose: function(dialog) {
     dialog.data.fadeOut('slow', function() {
      dialog.container.slideUp('slow', function() {
       dialog.overlay.fadeOut('slow', function() {
        $.modal.close();
        if($('#' + opts.photoID).attr('src') != 'undefined')
        {
         var src = $('#' + opts.photoID).attr('src');
         var d = new Date();
         $('#' + opts.photoID).attr('src', src + '&' + d.getTime());
        }
       });
      });
     });
   },
   overlayClose: true,
   autoResize: true
  });
 }
})(jQuery);

在asp页面上成功，其中页眉和页脚是在asp包含的文件中创建的...但是如果我将它添加到页面所在的页面中，则返回文档正文为空。 / p>

Answer 1

由于您使用的是jQuery，为什么不使用它的.getScript()方法接受脚本加载时的回调？

$.getScript('path/to/myplugin.js', function(){
     $('#object').myplugin({
            option1: 1,
            option2: 2
      });
});

Answer 2

使用：

jQuery.getScript()

或

$.getScript()

附加脚本并应用

有了这个你必须记住插件必须添加到jQuery对象，如：

(function($){})(jQuery)

jQuery动态添加脚本获取body为null

2 个答案: