How can I include/require foreign JavaScript libraries in WordPress? - javascript

I am writing an interactive google map in javascript for a wordpress page. As far as I know, the only way to use javascript with wordpress is by creating a separate .js file and just calling the methods from there within the wordpress page. So my question is, if I need to use the google maps api in my javascript code, how do I 'include' it within the .js file instead of using a <script> tag in the html?

AFAIK there is no include in javascript. Take a look at wp_enqueue_script().
Edit
Just stumbled over the yepnope.js library by Alex Sexton. Maybe this is what you are looking for.

Related

How to add external javascript library and stylesheets in a widget?

I am trying to create a Javascript widget where in the user of the widget will have to add a couple of lines of Javascript to his page which in turn will add an externally hosted javascript to his page. Through this javascript, I'll add HTML code to his page. In this HTML, I'm using Angular Material Library.
I have a few questions:
How should I go about this? Can someone share a link of a related tutorial?
Is it possible to add external stylesheet and script to the widget?
How do I avoid any conflicts with the user's own website global objects?
You are most likely to create an iframe solution which your Javascript will inject on the page upon rendering.
Name conflicts can be avoided using naming convention for stylesheets, IIFE for scoping.
I think your question seems already answered here: Creating a javascript widget for other sites

I need to include a javascript in a wordpress blog which has no plugin

I need to include some JavaScript for a BMI calculator in a WordPress blog.
The BMI Calculator is here.
However, WordPress strips out the code when the page is published.
Short of using some form of iframe to show the script, is there any other way?
Thanks, Christine.
I haven't tried embedding that particular script you mention in a page but every time I need to include any other javascript in my wordpress site I use the plugin:
http://www.matteoionescu.com/wordpress/embed-html/
This allows you to take advantage of the custom fields to insert code directly into the page.
I have inserted a jQuery script to an existing site before using javascript. Here is the code I used, you may be able to adapt it to add you library.
<script>
//Insert JQuery Javascript Library
if(!window.MyLibrary){window.MyLibrary={};s=document.createElement('script');s.type= 'text/javascript';s.src=window.location.href.replace(/((custompages)|(eware.dll)).*/i,'')+'custompages/jquery-1.4.4.min.js';document.getElementsByTagName('head')[0].appendChild(s);}
</script>
You may need to reference a library hosted on the internet rather than on wordpress

Externalize Javascript in YAP

I am working on a Yahoo! App which requires certain external Javascript Frameworks to be loaded and used. Also in the Yahoo! App Best Practices Guide, it is also mentioned that the sources should be externalized, however, externalization isn't working for me.
I am using the standard procedure to load the external JS file like the following:
<script src="http://www.google.com/js/nxsl.1.js"></script>
But the above statement is giving me an error that external sources are not allowed.
Is there any way to use external JS files as I don't want to include all of my JS Login inline, it doesn't make sense to me and majorly my code won't be re-usable.
Any thoughts ?
Take a look at Yahoo's Get utility. It's part of their YUI library. It enables cross-site loading and is easy to use. You can read about it here:
http://developer.yahoo.com/yui/get/

How to use jQuery in affiliate sites?

Let's say I want to give my partners a simple <script src> tag to include some dynamic content on their site, loading from my site.
Is there any way I can use some javascript framework in my .js file so I can do some more fancy things? jQuery? I assume this is a problem as it might conflict the site's own javascript code? What if they already included jQuery on their page? Or some other conflicting library?
You can use jQuery's noConflict mode:
<script>
myOwnJQuery = jQuery.noConflict(true);
</script>
You can find more details in an excellent answer to a similar question.
I suggest using the LazyLoad library.
Then modify the original LazyLoad js file and at the end append the appropriate LazyLoad.XXX calls which then loads any other .js you are interested in. This is then the file you hand to your partners to include.
e.g. if you then want to load jQuery just load it via LazyLoad and use the noConflict() function.
For more details about that. Check these and similar references
Using jQuery with Other Libraries
How do I run different versions of jQuery on the same page?

Javascript/Markup in Assembly

I'm trying to somehow render out javascript for a particular user control rather than just having a script include for the javascript file.
The reason why I don't want a simple script include is because I need to append unique ClientID's to the dom elements at runtime.
I could hardcode the javascript in a function and just append the ClientIDs. However, this will look messy and I'm not liking the idea of hardcoding javascript code in a class- it would be a nightmare to maintain.
What are some strategies that I can use to keep javascript/markup separate from the compiled code? I want to somehow have the javascript source included in the assembly as well so that as a user control, it would not require manual script includes and have no other dependencies for it to work.
I used this code from Rick Strahl's blog. Works awesome with jQuery and those types of libraries. http://www.west-wind.com/WebLog/posts/252178.aspx
HTH,
ck
PS If you're using a Web Application Project you can use javascript files as embedded resources.

Categories