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>')>

instead of changing the innerhtml of a div, you can make it easier and just change the src of an iframe. function changeVideo(vid_src){document.getElementById('vid_iframe').src = vid_src; } — Brian Glaz
– Brian Glaz, Commented Aug 31, 2011 at 0:46
As Sean says in his answer, use the target attribute, no script required. — RobG
– RobG, Commented Aug 31, 2011 at 1:01

Tom Platts · Accepted Answer · 2011-08-31 00:58:31Z

2

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.

answered Aug 31, 2011 at 0:58

Tom Platts

335 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RobG Over a year ago

I think you mean the target attribute.

score 1 · Accepted Answer · 2011-08-31 01:15:02Z

1

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.

edited Aug 31, 2011 at 1:15

answered Aug 31, 2011 at 0:58

user912695

Comments

BrettCawley · Accepted Answer · 2011-08-31 15:04:50Z

0

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?

edited Aug 31, 2011 at 15:04

answered Aug 31, 2011 at 14:59

BrettCawley

11 bronze badge

1 Comment

user912695 Over a year ago

Please show an example URL with the code you have made so far, otherwise it is impossible to know what you are trying to do exactly, for your question is too vague.

jdcaron · Accepted Answer · 2011-10-09 01:27:39Z

0

<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>

answered Oct 9, 2011 at 1:27

jdcaron

1112 silver badges9 bronze badges

Collectives™ on Stack Overflow

Javascript Embedding Scripts onclick

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related