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

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

Related

Registering a Widget Javascript Dependency on Sitefinity

I'm trying to see if there is a way like Wordpress's enqueue script to properly include scripts onto the footer. I looked up the documentation, but all I could find was a way to do it for Widget Designers. I am looking for the ways to include the script properly and I'm using MVC.
I dug this up from the forums: http://www.sitefinity.com/developer-network/forums/developing-with-sitefinity-/where-to-store-mvc-widget-css-and-javascript-and-how-to-link-it
You could also include the js reference in your master page, which I know isn't ideal if the widget isn't used on every page. You could always bundle and minify site wide scripts to reduce the overhead a bit.
You could also try using a the Sitefinity js widget on the page the widget is used, there is an option to refrence a file and include it before the closing body tag: http://www.sitefinity.com/documentation/documentationarticles/user-guide/widgets/scripts-and-styles-widgets-group/configuring-the-java-script-widget

How to add javascript loading (jQuery) for entire Liferay site or portal?

I want to use jQuery on many of my pages, including Web Content portlet. Is it possible to declare javascript files loading on all of the site pages?
I know this can be done in protlet declaration and in theme template.
But is it possible to do this globally?
You already mention the theme template (e.g. portal-normal.vm). In that file you have control over the full HTML skeletton, so it's easy to add the relevant script loader there and it's available on all pages that use the given theme.
That's as global as it gets. Do this to all of the themes you're using (are you using more than one?) and you're set. It's not more than a single line in that file.

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

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.

Tool to identify which external javascript references are actually being used on a page

I'm working on a website that currently has the same block of external JavaScript references on each page (added via a master page). I'd like to go through the site and identify which script files are actually necessary for each specific page to improve performance. Problem is there are a lot of pages and I'm not sure how to do it without resorting to manual trial and error process.
Is there a Firefox plug-in or some other tool that will identify which JavaScript references could actually be called by the page and which are not necessary?
you can use firebug plus his plugin for javascript code coverage: http://getfirebug.com/extensions/index.html#firebugcodecoverage

Does JavaScript create issues when we implement master pages

Does JavaScript create an issue when we implement master pages?
It seems to me that it is quite tough to maintain and implement JavaScript on an application where we have used master pages. Is there any shortcut or the other way round to it?
Hai HotTester,
The Major issue would be finding ClientId's of controls used in your application.
There are no javascript issues when using master pages in asp.net unless you create some. ;)
While writing javascript you should see the final html generated when the page is processed and work on that html rather than thinking in terms of master page or content pages. You can put your common javascript functions in the master page so that it can be accessed in all the content pages. Also I would recommend putting all your javascript in an external file and including it in the master page. This is a good practice.
If you are facing some issues you can post the specific problem and we can try and solve them.
All the best...
There is no issue with finding of ClientID's in MasterPages in ASP.Net 3.5... As the content page has its own head tag unlike ASP.Net 2.0

Categories