Suppose there is an external site that lacks functionality (by external I mean hosted and maintained by someone else), ¿is there any way to add a custom script to it that executes when on the page?
You can, but this will only happen in you machine.
For each machine that you want to run the code you will have to setup the plugins and your code.
GreaseMonkey is the most popular, as zzzzzBov commeted.
You can check this tuto to see some screenshots: http://www.techradar.com/news/internet/the-beginner-s-guide-to-greasemonkey-scripting-598247
http://www.thewindowsclub.com/greasemonkey-scripts-firefox
Related
I have a website owner who uses X Theme on Wordpress for website development. The theme has an option where you can easily add custom JS, but it is global by default. This owner wants the JS script to only run in the header of the site.
What is the easiest way to go about achieving this?
Thanks,
Mr. Robot
Depending on what type of Javascript code is, most tracking scripts like Google requires it to be in the head tag. I don't see why any other code needs to be in head. There are a few ways to include it in a Wordpress head.
Simplest would be to download a plugin: Plugin Link
Make a child theme and Enqueue the script. I dont know too much on this one but you can View it here
Hoping I gave you some ideas on how to continue.
scripts from other providers I would normally include in my application in the following way:
<script src="https://apis.google.com/js/api.js"></script>
However I was wondering whether there is any drawback to just open the url: https://apis.google.com/js/api.js
and copy/paste the script inside my application
The advantage for this would be for example when using React - to just copy/paste the script inside the particular component that is using it.
However I'm not sure whether there are any drawbacks - for example whether these scripts might be updated sometimes by third parties (say Google) and it will stop working as I'll have old version copied locally.
Any idea whether there would be any problems with just copy/paste external third parties scripts locally into my code (say React component)?
The point of a CDN is to avoid downloading common scripts more than once: if you visit website A, and it gets https://apis.google.com/js/api.js, then you visit website B which also gets https://apis.google.com/js/api.js, your browser will only download it the first time, and website B will load faster.
Copying the script into your own file will work but you'll lose this advantage.
Yes, actually you can put it in a JS file and then in the Index.html you can do a reference to that file.
<script type='text/javascript' src="../../path/to/the/file/api.js"></script>
I just did a proof of concept/demo for a web app idea I had but that idea needs to be embedded on pages to work properly.
I'm now done with the development of the demo but now I have to tweak it so it works within a tag on any websites.
The question here is:
How do I achieve this without breaking up the main website's stylesheets and javascript?
It's a node.js/socket.io/angularjs/bootstrap based app for your information.
I basically have a small HTML file, a few css and js files and that's all. Any idea or suggestions?
If all you have is a script tag, and you want to inject UI/HTML/etc. into the host page, that means that an iframe approach may not be what you want (although you could possibly do a hybrid approach). So, there are a number of things that you'd need to do.
For one, I'd suggest you look into the general concept of a bookmarklet. While it's not exactly what you want, it's very similar. The problems of creating a bookmarklet will be very similar:
You'll need to isolate your JavaScript dependencies. For example, you can't load a version of a library that breaks the host page. jQuery for example, can be loaded without it taking over the $ symbol globally. But, not all libraries support that.
Any styles you use would also need to be carefully managed so as to not cause issues on the host page. You can load styles dynamically, but loading something like Bootstrap is likely going to cause problems on most pages that aren't using the exact same version you need.
You'll want your core Javascript file to load quickly and do as much async work as possible as to not affect the overall page load time (unless your functionality is necessary). You'll want to review content like this from Steve Souders.
You could load your UI via a web service or you could construct it locally.
If you don't want to use JSONP style requests, you'll need to investigate enabling CORS.
You could use an iframe and PostMessage to show some UI without needing to do complex wrapping/remapping of the various application dependencies that you have. PostMessage would allow you to send messages to tell the listening iFrame "what to do" at any given point, while the code that is running in the host page could move/manipulate the iframe into position. A number of popular embedded APIs have used this technique over the years. I think DropBox was using it for example.
Facbook's all.js is too big. I just need the login part of it. Is there a way. Also is there a way to check if the user is loggedin without using all.js on the client side.
Facebook's all.js is too big.
Is it? They are doing everything they can to improve the download size of their script (not only for that particular one, but also for scripts embedded f.e. in the like button iframe, there’s some interesting blog posts about that on the net). It’s as big as it needs to be for the functionality it offers.
I just need the login part of it. Is there a way.
No, there is no way of just picking the cherries out of it. They have assembled all the functionality that is most commonly used in websites that use the Facebook API in that one script. Splitting it up into multiple scripts so that everyone could only load “just what they need” would hit performance even worse, if people had to embed multiple scripts if they needed more than one functionality.
Also is there a way to check if the user is loggedin without using all.js on the client side.
Only server-side then.
Your best chance is to do your entire development with all.js
Then run your code through a dead path removal script (Google Closure comes to mind).
This will remove everything that is not needed in your code workflow.
some time ago, I was reading an article(a library built by some guy) about how his library can do
lazy loading of JS
resolve dependencies between JS
(typically encountered when trying
to "include" one js from another)
include files only once. thought
specified multiple times regardless
of how they are called (either
directly specifying it as file or
specifying it as one of the
dependencies)
I forgot to bookmark it, what a mistake. Can some one point me to something which can do the above. I know DOJO and YUI library have something like this, but I am looking for something which I can use with jQuery
I am probably looking for one more feature as well.
My site has asp.net user controls
(reusable server side code snippets)
which have some JS. Some of them get
fired right away, when the page is
loading which gives a bad user
experience. Yahoo performance
guidelines specify that JS should
be at the bottom of the page, but
this is not possible in my case as
this would require me to separate the
JS and the corresponding server side
control into different files and
maintenance would be difficult. I
definitely can put a jQuery
document.ready() in my user control
JS to make sure that it fires only
after the DOM has loaded, but I am
looking for a simpler solution.
Is there anyway that I could say "begin executing any JS only after DOM has loaded" in a global way than just writing "document.ready" within every user control ?
Microsoft Research proposed a new tool called DOLOTO. It can take care of rewriting & function splitting and enable the on-demand js loading possible.
From the site..
Doloto is a system that analyzes
application workloads and
automatically performs code splitting
of existing large Web 2.0
applications. After being processed by
Doloto, an application will initially
transfer only the portion of code
necessary for application
initialization. The rest of the
application's code is replaced by
short stubs -- their actual function
code is transferred lazily in the
background or, at the latest,
on-demand on first execution.
OK I guess I found the link
[>10 years ago; now they are all broken]
http://ajaxian.com/archives/usingjs-manage-javascript-dependencies
http://www.jondavis.net/techblog/post/2008/04/Javascript-Introducing-Using-%28js%29.aspx
I also found one more, for folks who are interested in lazy loading/dynamic js dependency resolution
http://jsload.net/
About the lazy-loading scripts thingy, most libraries just adds a <script> element inside the HTML pointing to the JS file to be "included" (assynchronously), while others like DOJO, fetches it's dependencies using a XMLHttpRequest and then eval's its contents, making it work synchronously.
I've used the YUI-Loader that is pretty much simple to use and you don't need the whole library to get it working. There are other libraries that gives you just this specific funcionality, but I think YUI's is the safe choice.
About your last question, I don't think there's something like that. You would have to do it yourself, but it would be similar to using document.ready.
i did in my framework a similar thing:
i created a include_js(file); that include the js file only if it isn't included reading and executing it with a synchronous ajax call.
Simply put that code in top of the page that needs dependencies and you're done!