I am writing a jQuery plugin that references another plugin, I dynamically add the reference to that plugin when mine is called:
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);
To call this plugin I use the following in my head tags:
<script type="text/javascript" src="path/to/myplugin.js" />
<script type="text/javascript">
$(document).ready(function() {
$('#object').myplugin({
option1: 1,
option2: 2
});
});
</script>
I have tested this successfully on one page, however I'm trying to update another page that was using the code and I keep getting a document body is null error. I'm assuming this 开发者_如何学运维is because the body hasn't loaded before my plugin is trying to add the script to it. I changed my page code so that the reference to the plugin is also in the document ready event.
<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>
I no longer get the document body is null error, however I get an error telling me that $('#object').myplugin is not a function
The page is an asp mess, I have verified that I am adding the information in the header of the page...so I'm kind of at a loss. I'm pretty certain I know what is happening, but not why or a solution.
EDIT Here is what my plugin looks like:
(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);
It is successful on an asp page where the header and footer are being created in asp include files...however if I add it to a page where the header is in the same page it comes back document body is null.
Since you are using jQuery why not use its .getScript()
method that accepts a callback for when the script is loaded ?
$.getScript('path/to/myplugin.js', function(){
$('#object').myplugin({
option1: 1,
option2: 2
});
});
use:
jQuery.getScript()
or
$.getScript()
to append script and apply it
with this you must remember that plugins has to be added to jQuery object some like that:
(function($){})(jQuery)
精彩评论