I want to execute javascript file which is on another server and get the output of that script from my javascript code. Is there any way of doing this?
Thanks in advance.
The file which is on another server contains document.write method. Can I get that output in my javascript variable?
Only by overriding document.write and then loading the new script.
function capture(data) {
// do something with data
}
document.write = capture;
var script = document.createElement("script");
script.src = "http://example.com/example.js";
document.body.appendChild(script);
$.getScript is what you're looking for.
Related
I want to create my own asset loader. To load external scripts, I used following javascript
function loadScript(src, callback) {
var script = document.createElement("script");
script.onload = function() {
document.head.appendChild(script);
callback();
};
script.src = src;
}
But I think this isn't the most elegant solution. This code snippet would make my HTML code ugly since it appends code to the head - for all of my dependencies.
So my question: is it possible to access to my external loaded code without using following line
document.head.appendChild(script);
Am I able to executes my script with pure js like
script.execute();
Or even better, is there a way to access to the data stored in my external js file? Like variable "bar", for example?
var foo = script.get("bar")
Could I even execute a function of the external file?
script.function(params)
It would be great to hear of your ideas and experiences!
Darth Moon
Edit: I forgot to exclude ajax. I know I could load code via ajax and executes it via eval(), but that won't be a good idea if you're testing code local since you need a Server (like an XAMPP Apache) to send ajax request to your local files.
You could try something like so as below.
Internal script:
function appendScript(src) {
var script = document.createElement(‘script’);
script.src = src;
document.head.appendChild(script);
}
External script:
function loadedScript() {
// run something
}
loadedScript()
The external code will just run loadedScript() once the file is loaded.
So I made a script for photoshop to create signs, and I have alot of data from parse.com that I want to use in that script I made for photoshop. My problem is how do I get that data into the script so that I am able to use it?
I've tried
var parseI = document.createElement("script");
parseI.src = "http://www.parsecdn.com/js/parse-1.4.0.min.js";
parseI.type = "text/javascript";
document.appendChild(parseI);
But I get an error saying that document is undefined. I have no idea how to do this.
Try using document.body.appendChild(parseI) instead of just document.appendChild().
Look here for more info
I have an Android application that consist in a simple WebView that load a local html file in the assets folder of the project.
The HTML has a tag that calls (AJAX) an external service and expects as a response a String that represent a .js filename (say, 'test.js').
In test.js there is a simple funcion declaration, as:
var testFunction = function(){
// some code here
}
The AJAX callback then construct via javascript a tag that points to the .js file and append it to the head of the document; then call the testFunction:
$.ajax('externalService').done(function(response){
var script = // construct the script tag;
$('head').append(script);
testFunction();
});
Important: the script tag points to an external .js file, like
<script src="http://justatest.com/test.js">
... and all works fine!
Now i try to do the same thing putting the test.js inside the assets folder of the project. Obviously i changed the src of the script created in the callback with a relative path:
<script src="test.js"></script>
but when i try to invoke the function testFunction i get an error (testFunction is not defined).
The local path is correct (i put jquery.js in the same local folder of test.js and loaded it directly in the html with a with no errors).
I put all the attributes (like type="text/javascript") in the tag as well...
so, why the webview doesn't load a local .js file in this way?
thank you :)
EDIT: I tried the solution found in this thread:
jQuery getScript not working in Android WebView when using Local Assets/HTML/Resources
and it worked!!!!
I tried the solution found in this thread:
jQuery getScript not working in Android WebView when using Local Assets/HTML/Resources
and it worked!
I report the solution:
var scriptUrl = "test.js";
var head = document.getElementsByTagName("head")[0];
script = document.createElement('script');
script.type = 'text/javascript';
script.src = scriptUrl;
script.onload = function() { alert("Success"); };
script.onerror = function(e) { alert("failed: " + JSON.stringify(e)); };
head.appendChild(script);
So if i use the jquery append() method it doesn't work, but if i use the javascript appendChild method it work...
I'm trying to write a piece of javascript that integrates a webpage with an external system. Currently, what I have is a very small amount of code that dynamically inserts a script element into the page.
$(document).ready(function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://example.com/example.php?arg1=1&arg2=2";
document.body.appendChild(script);
});
The JS returned by the external system is a large one-line document.write call which writes a table to the page.
document.write('<table><tr><td>blah</td></tr></table>');
When I inject this script element into the page, I can see it using a DOM inspector, but the script does not appear to execute. If I put the script element into the HTML manually, the javascript executes just fine (so it's not a same origin policy or malformed html error...), but I'd like it to be dynamic.
Any ideas why the javascript isn't executing?
Using document.write after the DOM is ready will replace the contents of the page with whatever it is you're writing.
I suggest using one of the actual DOM manipulation methods if you want to insert anything into a page.
As far as the script not executing, are you positive it's being attached correctly? Have you tried setting a javascript breakpoint on the included script to verify that this is the case?
Try to use this code (it the same use by google for analytics or facebook).
Put it on the bottom of your page ;)
<script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = '/example.php?arg1=1&arg2=2';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s);
})();
</script>
OR as davidbuzatto suggest, you have to use $.getScript() which is a shorthand $.ajax() function.
$(document).ready(function() {
$.getScript("/example.php?arg1=1&arg2=2", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});
});
Edit :
Seens you have probably a cross-domain restriction, just try to use relative url "/example.php?arg1=1&arg2=2" instead of the full url for the include.
Or if it's not the same web server, use a cross-domain.xml file.
Because you are just including it, not executing. As you are using jQuery, take a look in the $.getScript() function.
http://api.jquery.com/jQuery.getScript/
It will fit your needs. This function is an Ajax function, so take care, because its behavior is asynchronous. Use its callbacks to execute code that is based in the loaded script.
Edit: Felix corrected me about the script execution, but I still think that you may give the function a try.
i think you need to use JSONP to achieve that and using a call back function to append it to body tag
$(document).ready(function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://example.com/example.php?arg1=1&arg2=2&callback=showit(data)";
document.body.appendChild(script);
});
function showit(data){document.write(data);}
I've always seen this done more like:
document.write('<scr' + 'ipt>---scripthere---' + '</scr' + 'ipt>');
I'm assuming it is for similar reasons. Try that instead of creating a "real" script element.
Why not just stick the JS in a separate window/iframe where it executes and displays the tables correctly, and then pull that table using AJAX to that page?
JQuery AJAX is the easiest to use IMO:
http://api.jquery.com/jQuery.ajax/
The following are the first lines of code in a <script> tag just above the closing body tag in my document (it specifies that a locally-served copy of jQuery is run in the event that Google's CDN fails):
if(!window.jQuery){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/js/jquery.js';
var scriptHook = document.getElementsByTagName('script')[0];
scriptHook.parentNode.insertBefore(script, scriptHook);
}
jQuery(document).ready(function($){
// page behaviors
});
It does execute successfully, in the sense that if my computer is not connected to the Internet (this is a locally-served page), the local copy of jQuery is inserted. However, the document.ready() section below does not execute. I'm guessing this is because it is invoked before the fallback copy of jQuery takes effect. What's the proper practice for somehow "delaying" its execution so that either copy of jQuery will work properly?
Consider using an existing script loader such as yepnope. There's an example of exactly what you're trying to do on the home page.
You need to be sure that the script you are appending to the dom has finished loading before calling jQuery. You can do this with the technique described here:
if(!window.jQuery){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/js/jquery.js';
script.onreadystatechange= function () {
if (this.readyState == 'complete') jQueryLoaded();
}
script.onload = jQueryLoaded;
var scriptHook = document.getElementsByTagName('script')[0];
scriptHook.parentNode.insertBefore(script, scriptHook);
}
function jQueryLoaded() { };
You can also fetch the jQuery contents as an Ajax request, create a script tag with those as the body of the script and append it. That would also work.
Try that
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script>
jQuery(document).ready(function($){
// page behaviors
});
</script>
This way the script tag will be loaded synchronously.
The question "of how do I cope with my CDN failing and load a file hosted on my server" seems to come up a few times lately.
Question I'd ask is whether adding yet more js is the way to achieve the resilience and what level of resilience do the js approaches really add e.g. if the CDN is down they'll be a quick failure but how well do these approaches if the CDN is slow to respond how well do these solutions cope?
An alternative way to approach this is treat it as an infrastructure problem...
Run a CDN based on a domain/sub-domain you own. Have automated monitoring on it's availability, when it fails switch the DNS over to a backup server (anycast may provide an alternative solution too)
A php solution would be something like this:
$google_jquery = 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
$fp = #fsockopen($google_jquery, 'r');
if (!$fp)
{
echo '<script type="text/javascript" src="js/jquery.js"></script>';
}
else
{
echo '<script src="'.$google_jquery.'"></script>' }
}