I came accross some embeded javascript, e.g.
<script src="http://player.ooyala.com/player.js?embedCode=5oZDBoMzreLfI78xe1sCSLDmQQFyhXym&deepLinkEmbedCode=5oZDBoMzreLfI78xe1sCSLDmQQFyhXym"></script>
I would like to know how I can execute this dynamically. The reason is, I would like to be able to save the code in a DB and then execute it on the fly later.
I've already tried using $.get with the url and doing an eval on the response with no luck.
I use jQuery if this helps with a solution.
How could I go about this? Thanks.
You're looking for $.getScript("http://player.ooyala.com/player.js?embedCode=5oZDBoMzreLfI78xe1sCSLDmQQFyhXym&deepLinkEmbedCode=5oZDBoMzreLfI78xe1sCSLDmQQFyhXym").
Note that if the script uses document.write, this is impossible.
You can append the entire string to the body using jquery
EDIT: have to escape some characters
$("body").append('\<script src="http://player.ooyala.com/player.js?embedCode=5oZDBoMzreLfI78xe1sCSLDmQQFyhXym&deepLinkEmbedCode=5oZDBoMzreLfI78xe1sCSLDmQQFyhXym"\>\<\/script\>');
You can use: $.getScript("http://player.ooyala.com/player.js?embedCode=5oZDBoMzreLfI78xe1sCSLDmQQFyhXym&deepLinkEmbedCode=5oZDBoMzreLfI78xe1sCSLDmQQFyhXym&playerContainerId=myplayer")
Note the playerContainerId=myplayer part.
Ooyala has a playerContainerId parameter if you want to add the player as innerHtml of a div and not a document.write().
http://support.ooyala.com/developers/documentation/api/player_examples_qpass.html
You could request it if it supported CORS and then use jQuery's $.globalEval() to evaluate the response - it is executed (from memory) within a script element.
Alternatively, remove the script element on load and then inject it when you want to use it again.
Related
I'm trying to interface with Adobe Test & Target because I want to load JSON rather than markup through my mbox. I want to load some mbox content into javascript and manually add it to the DOM. I have searched all over for full documentation of the mbox.js but I can't find anything other than the very basics. It describes how to use mboxDefine() and mboxUpdate to target a specific dom element. Is there a function that just returns the content?
```
T&T does not offer a function to assign the response to a javascript variable. Basically the way it works is mbox.js builds a url to their server and then then outputs a script include tag. This is done to get around the same origin policy limitations (cross-site scripting).
In order to handle whatever is in the html offer, they put it in their own javascript variable on their server and then output it as that as the response. However, they also have the response output the code that updates the target element. So there's nothing you can do to actually stop them from updating the target element with the html offer contents. They simply don't expose that.
However, you don't have to put html in an html offer. You can put json (javascript) in an html offer. Just do like
html offer 'myJsonMbox' (in interface)
<script type='text/javascript'>
var myJsonString = "[json string]";
</script>
Then on your page (inside your body tag, but before your code that wants to use it) you'd have the regular mbox code:
<div class='mboxDefault'></div>
<script type='test/javascript'>
mboxCreate('myJsonMbox');
</script>
And then somewhere after that, where you're wanting to do something with it, that myJsonString is there for you to reference. Or, you can do it with the mboxDefine and mboxUpdate sometime after page load, if you prefer.
Is there some particular reason why you don't think this will work for you?
You can:
a- Insert JS code you are going to use to manually manipulate the DOM
b- Insert CSS code you can use to alter the original HTMl or the newly added HTML.
c- Insert a call to a 3rd party script that will load content from a 3rd party server if needed, or the same server.
I have an ajax script which references something in the same domain. I want to pass some HTML and then javascript associated with it. I figured that since it is not X-domain, It might let me do that. My goal is that I am taking a webservice and then returning a string which will be put into a div... when the javascript is inserted it would be fired, which allows a bunch of good stuff to happen.
I was wondering if there is anything special i need to do to pass javascript from the server across this request. My current AJAX request seems to sanitize and remove the scripts. THoughts? How would i go about this?
If you want script to be included in the AJAX response and executed by the browser, you will first need to do something similar to the article posted as a potential duplicate, excepting that you have HTML to be injected as well. Proceed injecting it as normal, but after you set the content, try something such as:
$(responseText).find("script").each(function(index, element){
var script = $(element).text();
eval(script);
}
Untested
However, I would try to find a way to avoid doing the above. JQuery provides ways to handle classes of elements added dynamically to the DOM. See: http://api.jquery.com/on/
I would like to edit part of the .js file. I mean add some code, and these code should be executed when I open the website (in browser). How I can do that?
The easiest way to do that is to use jquery and put your code into
$(document).ready(function() {
//your code
}
or if you don't want to use jQuery
document.onload = function()
{
//your code here
}
If you want to add on to existing JavaScript code for a site, I am not sure that you can in a permanent way. However, if you want to change some sort of behaviour just for you, you could take a look into creating a userscript. There are many examples at userscripts.org.
You cannot edit the js file but you can override the functions and the variables. This will work unless the js file is not protected by closure.
You can't modify the js file on client side. However, if you just want to add some code, you can use userscript.
this is a bad...
but if the js is not remote, use AJAX to read the file contents, then change what you need then use the DOM to create the script tag and use .innerHTML to put the content in.
if you would like code tell me if you want JQuery or native and i will post
P.S if the file is remote there is no way to do it...
I need to dynamically add a script reference, so I do this:
jQuery('html head').append("<script src='somesource.com/somejs.js'><\/script>")
and it does't work - I don't get any errors but I can't execute any of the methods defined inside that script.
Any ideas what I am doing wrong?
jQuery has a getScript method:
$(document).ready(function() {
$.getScript('somesource.com/somejs.js');
});
Without seeing the script in context, it is hard to say, but possibilities include:
You have the URL wrong (you have what appears to be a domain name, but no protocol in the URI)
You are trying to use the functions without allowing time for the browser to download and run the script (so they aren't defined at the time you call them)
You need a type='text/javascript':
jQuery('html head').append("<script type='text/javascript' src='somesource.com/somejs.js'><\/script>")
I have a script element in my webpage, something like this:
<script id="myscript"></script>
Now, from a javascript file, I'm doing something like the following:
$('#myscript').src('http://foo.bar?callback=somefunc')
Now this remote script 'returns javascript' of the following form:
somefunc(somearg);
When I run all of this, things work neatly, the script gets loaded dynamically, and the 'somefunc' callback is executed.
The problem happens when I do the same thing again. Let's say I again call the same thing:
$('#myscript').src('http://foo.bar?callback=somefunc')
This, for some reason, DOESNT return the javascript call in Firefox only. (Works fine in IE - somefunc gets executed again as expected).
I can think of ugly workarounds (such as doing a $('head').append('<script...')) every time - but I'd like to know what's going on here.
Thanks in advance!
I would recommend you to use $.getScript instead of using a single script tag load scripts multiple times:
$.getScript("http://foo.bar?callback=somefunc");
That function will abstract the script element creation and its introduction to the DOM.
But it seems you are accessing a JSONP service, in that case you need only $.getJSON:
$.getJSON("http://foo.bar?callback=?", function(json){
// callback
});
I can think of ugly workarounds (such as doing a $('head').append('
Ugliness is subjective; personally, I find the technique you're trying to use (making a single script tag load multiple scripts) far uglier.
But that's not really important. Adding a new script tag works - so if you're having trouble with what you're doing, just use the normal method and live with it.
FWIW: Firefox probably doesn't respond because you're not actually changing anything... If you want to make this even uglier, append some do-nothing querystring parameter that changes each time through.