Javascript Embedding Scripts onclick

Question

What I would like to do is change the content of a div based on the different links clicked on the same page. Can anyone point me in the correct direction? AFAIK it could be dangerous to insert scripts directly into a page, changing text works okay but it seems I'm not sure about scripts. The content of the scripts are embed codes for video streaming. I realise this may not be the right way to go about it. My attempt won't work because of escaping the '<,>' characters and passing the parameter only seems to accept text with no spaces.

The way I've attempted it is as follows (in pseudocode);

function changeVideo(script){ div.innerhtml=script;}

then links that change the content of the div;

<a href='#' onclick=changeVideo('<iframe src=justin.tv etc..></iframe>')>
<a href='#' onclick=changeVideo('<iframe src=ustream.tv etc..></iframe>')>

Answer 1

You could drop the use of JavaScript and create an iFrame with a specified name to host the content; while giving the links a target tag. Thus making any links with the target tag specified appear within the named iFrame.

However if you insist upon using JavaScript you could consider the use of AJAX.

Answer 2

I suggest you to locate your a elements with unobstrusive Javascript, with getElementById() for example.

Once you have got them in variables like, lets say, a1 and a2 , and the iFrame is in variable iframe do a code like this.

// ...a1 and a2 are anchors and iframe is the frame. 
var srcSwitch = function(e)
{
    e.preventDefault();    // this will prevent the anchor from redirecting you
    iframe.src = this.src; // this changes the iFrame‘s source
};
a1.addEventListener('click', srcSwitch, 1);
a2.addEventListener('click', srcSwitch, 1); // and we register event listeners.

With this code, there is no need to insert Javascript within HTML attributes and you must only put the script URL in the anchors SRC attributes.

Tell me how it goes, greetings.

Answer 3

I may have generalised the question too much.

So I want to embed a stream on clicking a link. If the link is something like a proper URL http://Jimey.tv/mystream the iframe works, but loads the whole page. But I want to use the stream embed code to get just the player

The embed code looks similar to;

<script type = text/javascript> channel='mychannel' w='620' h='400'</script><script type=text/javascript> src="jimmy.tv/embed.js></script>

My original JavaScript method doesn't work because of escaping the < characters, and passing the embedcode seems to be problamatic. Hopefully I've made this a bit clearer?

Answer 4

<script>
iframe1 = '<iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=xenema&amp;popout_chat=true" height="301" width="221"></iframe>'
</script>
<a href="#" onclick="alert(222)">link 1</a>
<a href="#" onclick="document.getElementById('videos').innerHTML = iframe1">link 2</a>
<div id="videos">diiiiv</div>