Develop Reference

Using javascript to update <embed> parameter

I've been recently trying to implement a flash application, which at some point needs to be embedded via html. It looks something like>
<embed src=".." quality=".." ... and at some point FlashVars="&firstparam&secondparam..."
What I am trying to do is implement a dropdown, which would when pressed change that FlashVars parameter so the app shows something different. I've tried with
document.getoElementByID().FlashVars="new parameters"
but it doesn't work (it works perfectly for highlited default parameters such as src, height, width...)
I've also tried to write whole embed part again with javascript snippet, but it also didn't work. How is this done in javascript? I'm a beginner in this field so any help is greatly appreciated.
Thanks.

To understand why your code didn't work, you should understand what's flashvars parameter and how it's working.
Adobe said about that here, for example :
The FlashVars parameter of the HTML <OBJECT> tag sends variables into the top level of a SWF file when it loads in a web browser. The <OBJECT> tag is used to add SWF files to HTML pages. The <EMBED> tag can also be used, but is older and now obsolete.
So here we can understand that those variables are loaded when the SWF is loaded and that's why even if you've changed the flashvars parameter, that will do nothing, absolutely nothing to that loaded SWF which should be loaded again to get them (variables) applied.
So to do that, take this simple example :
HTML :
<div id='swf_container'>
<embed id='swf_object' src='swf.swf' flashvars='id=1' />
</div>
JavaScript :
// change the flashvars attribute
var swf_object = document.getElementById('swf_object');
swf_object.setAttribute('flashvars', 'id=2');
var swf_container = document.getElementById('swf_container');
var inner_html = swf_container.innerHTML;
// reload the swf object
swf_container.innerHTML = '';
swf_container.innerHTML = inner_html;
This manner is, of course, working but maybe it's not a good idea to reload the SWF object everytime we need it to do something, and that's why we have ExternalInterface to communicate between the SWF and JavaScript.
So in the case where you've access to the ActionScript code to create that SWF, you can use ExternalInterface to call any function in your SWF when it's already loaded.
For that, take this example :
ActionScript :
if(ExternalInterface.available)
{
// registers an AS function to be called from JS
ExternalInterface.addCallback('from_JS_to_AS', from_JS);
}
function from_JS(id:int) : void
{
// use the id sent by JS
}
JavaScript :
var swf_object = document.getElementById('swf_object');
swf_object.from_JS_to_AS(1234);
... and don't forget to use swfobject to avoid some browsers compatibility and to be sure that you establish the communication between your ActionScript side and the JavaScript one ...
Hope that can help.

Just do this :
$('embed') // targets the embed tag in the DOM
.attr("attribute-name","attribute-value");
Here's an example : https://jsfiddle.net/DinoMyte/1a6mwb13/2/

Write a js script in a div

I am trying to get a script from another website using jQuery then document.write it
here is my code
var url = "https://code.jquery.com/jquery-1.10.2.js";
var dam = $.getScript(url);
document.write(dam);
But this doesn't work!!
all what I get on the page is [object Object]
Can this be achieved without XHR?
jsfiddle

Don't use document.write, it does not do what you think it does. What it does not do is write some data at the end of the document. What it does instead, is pipe data into the current write stream. And if there is no write stream, it will make a new one, resetting the document's content. So calling document.write(dam) means you just wiped your document. document.write is a low level JS function from an earlier era of JavaScript, don't use it.
Instead, you want to use modern DOM manipulation functions, so in jQuery, that's stuff like:
$(document.head).append($("<script>").attr("src", url));
where
$("<script>")
builds a new script element,
$(...).attr("src", url)
sets the "src" attribute to what you need it to be, and:
$(document.head).append(...)
or
$(document.body).append(...)
to get the script loaded into your document. If it's a plain script with src attribute, it can basically go anywhere, and if it's a script with text content that should run, you can only make that happen through document.head.
Although if it's just a script you need to load in and run, you can use getScript, but then you don't need to do anything else, it's just:
var url = "https://code.jquery.com/jquery-1.10.2.js";
jQuery.getScript(url);
Done, jQuery will load the script and execute it. Nothing gets returned.
Of course, the code you're showing is loading jQuery, using jQuery, so that's kind of super-odd. If you just want to load jQuery on your page, obviously you just use HTML:
<!doctype html>
<html>
<head>
...
</head>
<body>
...
<script src="http://https://code.jquery.com/jquery-1.10.2.js"></script>
</body>
</html>
with the script load at the end so the script load doesn't block your page. And then finally: why on earth are we loading jQuery version 1.x instead of 2.x? (if you need to support IE8: that's not even supported by Microsoft anymore, so you probably don't need to).
And finally, if we don't want to load the script, but we really just want its content, as plain text, there's only a million answers on Stackoverflow already that tell you how to do that. With jQuery, that's:
$.get("http://https://code.jquery.com/jquery-1.10.2.js", function(data) {
$(document.body).append($("div").text(data));
});
But you knew that already because that's been asked countless times on Stackoverflow and you remembered to search the site as per the how to ask instructions before asking your question, right?

executing the script on the page is not my goal!. I want to get the
script content and put it a div (USING JAVASCRIPT - NO XHR) , is that
possible ?
Try utilizing an <iframe> element
<div>
<iframe width="500" height="250" src="https://code.jquery.com/jquery-1.10.2.js">
</iframe>
</div>
jsfiddle http://jsfiddle.net/snygv469/3/

Make it easier... use my fiddle
http://jsfiddle.net/wwwfzya7/1/
I used javascript to create an HTML element
var url = "https://code.jquery.com/jquery-1.10.2.js";
var script = document.createElement("SCRIPT"); //creates: <script></script>
script.src = url; //creates: <script src="long_jquery_url.js"></script>
document.body.appendChild(script); //adds the javascript-object/html-element to the page.!!!

Use this way, it can fix your problems.
$.get( "https://code.jquery.com/jquery-1.10.2.js", function( data ) {
alert(data);
});

You can try adding
<script src="http://code.jquery.com/jquery-1.8.3.min.js" ></script>
Then an AJAX call, but it pulls data from CACHE. It looks like an AJAX but when <script> is added file goes in cache, then read from cache in the ajax. In cases where it is not stored in cache read it using normal AJAX.
jQuery.cachedScript = function(url, options) {
// Allow user to set any option except for dataType, cache, and url
options = $.extend(options || {}, {
dataType: "text",
cache: true,
url: url
});
// Use $.ajax() since it is more flexible than $.getScript
// Return the jqXHR object so we can chain callbacks
return jQuery.ajax(options);
};
$(document).on('ready', function() {
// Usage
$.cachedScript("http://code.jquery.com/jquery-1.8.3.min.js").done(function(script, textStatus) {
console.log(script);
});
});
Normal Solution
If you are ready to use AJAX look at this fiddle

How to fetch content of remote file and paste it on your document and execute that js code
I guess you want to get content written on remote file and want to write that content in your HTML. to do this you can use load() function.
To do this follow the following steps:
1. Create a file index.html Write the following code in it:
<pre id="remote_script"></pre>
<script>
$(document).ready(function() {
//var url = "https://code.jquery.com/jquery-1.10.2.js";
var url = "remote_script.html";/* For testing*/
$('#remote_script').load(url,function(){
eval($('#remote_script').text()); /* to execute the code pasted in #remote_script*/
});
});
</script>
2. Create another file remote_script.html for testing write alert('a'); in it without any <script> tag and run the above code.

How to display iframe by a Javascript snippet?

I have seen some widgets online that gives the user the possibility of including a short Javascript snippet in their own page, which when executed displays an Iframe, like in the following example.
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script><fb:facepile></fb:facepile>
How can I do this by myself - have a javascript on my server, that when called on a remote server, writes out an iframe or loads content into their page?

The traditional way (considered a bit messy; won't work with XHTML-as-XML host pages; if called after page load via async, will blow up the entire page):
document.write('<iframe src="http://www.example.com/myframe" width="100" height="100"></iframe>');
Alternatively with innerHTML to an element on the page with a predefined name:
document.getElementById('examplecomframe').innerHTML= '<iframe src="http://www.example.com/myframe" width="100" height="100"></iframe>';
Or with DOM to insert just before the current <script> (though again that can be unpredictable if deferred):
(function() {
var iframe= document.createElement('iframe');
iframe.src= 'http://www.example.com/myframe';
iframe.width=iframe.height= 100;
document.getElementById('examplecomframe').appendChild(iframe);
})();
Or to insert just before the current script:
var scripts= document.getElementsByTagName('script');
var script= scripts[scripts.length-1];
script.parentNode.insertBefore(iframe, script);
I wouldn't use jQuery for third-party script inclusion. You'd have to load the whole heavy framework into the enclosing page, just for the sake of a few lines of JS. This can cause clashes with other frameworks (or different versions of jQuery) being used by the host page, something very rude for a third-party script to do.

I think you may have how this is working a bit mixed up. The way it's working is this:
1. User requests page from your domain/server, page is served.
2. Client web browser on users machine interprets said page, if a script block includes a reference to a js file at some other location then said js file is fetched.
3. Javascript is processed by the clients browser.
So really all you need is a JS file (plain old ASCII) on the server and have it do some document.write() calls to add the code you want it to add, for example:
go to http://www.shaunhusain.com/TestIFrameViaJS
three files there involved
index.html
anotherpage.html
testIFrame.js
let me know if it doesn't work out or I took a wrong direction for what you're looking for?
Shaun

To generate a Tag with jQuery you can use $('<tagname />') and pass an object with parameters (for example src).
Afterwards you append this iframe to the Dom. Using html() you can set the html-content of a selected element (in this case a tag with id example) to your iframe.
$(function() {
var iframe = $('<iframe />', {
src: 'http://example.com',
width: 100,
height: 100
});
$('#example').html(iframe);
});

http://api.fatherstorm.com/test/4159620.php
using jQuery for this...
$(document).ready(function() {
$('#fb-root').append('<iframe/>');
$('#fb-root iframe')
.attr('id','my_iframe')
.attr('src','http://www.cnn.com')
.css('width','100%')
.css('height','100%')
.attr('frameborder','no');
});

How to embed and call a javascript script in a RichFaces/JSF page

I've been looking around for a method to embed and call javascript functions in JSF pages. I'm also using RichFaces.
To define the function, it appears I can do this in a cross-browser supported fashion:
<a4j:outputPanel ajaxRendered="true">
<f:verbatim>
<script type="text/javascript">
function datum() {
alert("hi");
}
</script>
</f:verbatim>
</a4j:outputPanel>
but I'm not sure how I can call this function when the page loads so the text it returns is embedded in an h:outputPanel. The plan is to have a js clock embedded in the page which is served to the client. Note I'm not using the body tag, I'm using facelets ui:composition, f:view (core) and RF RI rich:page.
Thanks

Regardless of what sorts of server-side tags you're using, by the time your page gets to the browser that's all gone and it's just HTML. (At least, it had better be, or things won't work anyway.) What you need to do is arrange for your code to be called by a "load" event handler. There are various ways to do this, but the simplest would be this:
<f:verbatim>
<script type="text/javascript">
window.onload = function() {
alert("hi");
}
</script>
</f:verbatim>
Now as to initializing another part of the page, once again what matters is what ends up in the HTML. You'll want to arrange for there to be some sort of HTML container (a <div> or something, depending on your page design) and you'll want it to have a unique "id" attribute. Your Javascript can then use the "id" to find the element and set its contents:
var elem = document.getElementById("whatever");
elem.innerHTML = // ... whatever ;
You'd probably do that stuff inside the "load" function.
Also, if you're using Facelets instead of JSP, which is a XML based view technlogy, you will need to add the XML CDATA section delimiters if your JavaScript contains comments // or literals such as <, >, &&, etc. Here's the example with the XML CDATA delimiters:
<f:verbatim>
<script type="text/javascript">
//<![CDATA[
//Comments won't show error now.
window.onload = function() {
alert("hi");
}
//]]>
</script>
</f:verbatim>
You can see a thorough explanation of when to use CDATA here. You do not need those if you're creating HTML5 pages.
Happy coding!

How to use javascript to swap swf in html?

I embedded a swf in my html page, but I would like it to swap to another swf when I clicked on a button in html. I used swfobject.js to embed the swf, and I use prototype to write the javascript. I thought I can just do this
$('movie').value = 'swf/bhts.swf';
alert($('movie').value);
the value did change to swf/bhts.swf, but it is still playing the original swf file...
this is the code I use to embed swf
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="530" height="298" id="flashcontent">
<param id="movie" name="movie" value="swf/trailer.swf" />
</object>
thanks.

Using swfObject:
<div id='flashContent'>
</div>
<script type='text/javascript'>
// Setup your initial flash
var so = new SwfObject(.....);
so.write ('flashContent');
// Some event handler
someElement.onclick = function ()
{
// Load up the new SWF
so = new swfObject(....);
so.write('flashContent');
}
</script>

How are you using SWFObject? If you use the swfobject.embedSWF method to add the SWF to your HTML file, then you can call that again with the same ID and it should remove the old Flash player object and add a new one with your new URL.
You also can use the SWF's own methods to replace the URL that it's using. If you've got the ID of the Flash object, use something like
var swf = getElementById("flash_id");
swf.LoadMovie(0, "http://example.com/newSwfUrl.swf");
and that should direct the Flash player to reload from a different location, replacing layer 0 (the default one). That may not work with really old Flash players, but should be fine in Flash 8 and later.