I am working on an integration issue, dealing with an old website that has many scripts based on prototype. I have to integrate it into an external website's template that uses a script (let's call it external-jquery-script.js
) on which I have no control, that uses jQuery.
external-jquery-script.js
uses the $
operator, and obviously the script conflicts with prototype. The issue is specifically with a function in external-jquery-script.js
(let's call it externalFunction()
) that is needed in order for the template to work properly.
I can not change the external template, but I can just fill in the available placeholders.
In the page resulting from the integration, I have the following:
<html>
<!-- external template's stuff - begin -->
...
<script src="http://www.external-website.com/js/common/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://www.external-website.com/js/common/external-jquery-script.js"></script>
...
<!-- external template's stuff - end -->
<!-- my page's stuff - begin -->
...
<script type="text/javascript" src="http://www.my-website.com/js/prototype.min.js"></script>
<script type="text/javascript" src="http://www.my-website.com/js/script.js"></script>
...
<!-- my page's stuff - end -->
... <!-- other contents... --> ...
</html>
Now, I tried redeclaring externalFunction()
in my script.js
, but still it doesn't work.
I redeclared it as follows:
(function($){
window.externalFunction = function(){
... //copied as is from external-jquery-script.js
}
})(jQuery);
I have two questions:
external-jquery-script.js
telling the script to use the $
operator as jQuery operator? I found a solution to my problem, that I'll share here.
Since I could not change the template, except for the "my page's stuff" area, I decided to override the jQuery part of the template, downloading automatically the script, through a cron, and replacing automatically the jQuery calls with a prototype/conflict-safe version, including the fixed script in the page, after the original version.
Now, since the script added a listener $(document).ready
, I also had to replace it with a Prototype version, disabling (in a sense) the jQuery listener.
Here is the script that executes the automatic replacement ( $1
represents the js script name, passed as a parameter):
#!/bin/bash
sed -i "s#\$(document)\.ready(#document\.observe(\'dom\:loaded\'\,#g" $1 ##THIS REPLACES $(document).ready with the prototype's equivalent
sed -i 's#\$(#jQuery(#g' $1 ##THIS REPLACES $( with jQuery(
sed -i 's#\$\.#jQuery\.#g' $1 ##THIS REPLACES $. with jQuery.
sed -i 's#(\$)#(jQuery)#g' $1 ##THIS REPLACES ($) with (jQuery)
before including this new script, I also added the following script, to avoid conflicts and to prevent the $(document).ready
to be fired:
<script>
<!--
jQuery = jQuery.noConflict(true); //After this jQuery is callable only throught the jQuery variable
jQuery.holdReady(true); //After this jQuery(document).ready stays pending, waiting for a jQuery.holdReady(false) that will never come, turning off the listener in the first jQuery script, that would cause problems otherwise
-->
</script>
So, I can now have the following, perfectly working, having both jQuery and Prototype in the same page, using an external template, including the fixed version of external-jquery-script.js
:
<html>
<!-- external template's stuff - begin -->
...
<script src="http://www.external-website.com/js/common/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://www.external-website.com/js/common/external-jquery-script.js"></script>
...
<!-- external template's stuff - end -->
<!-- my page's stuff - begin -->
...
<script>
<!--
jQuery = jQuery.noConflict(true);
jQuery.holdReady(true);
-->
</script>
<script type="text/javascript" src="http://www.my-website.com/js/prototype.min.js"></script>
<script type="text/javascript" src="http://www.my-website.com/js/external-jquery-script-fixed.js"></script>
<script type="text/javascript" src="http://www.my-website.com/js/script.js"></script>
...
<!-- my page's stuff - end -->
... <!-- other contents... --> ...
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.