change src of <iframe> with javascript

Question

What I would try is to change src="url" via JavaScript inside the iframe but seems didn't work

the iframe

<iframe id="cta" src="http://site1.com/37046"  opacity="0" scrolling="no" margin-top="50px" marginwidth="0" marginheight="0" align="middle" frameborder="0" width="100%" height="160px">
</iframe>

JavaScript code

var w = window.top.location;
if(w.host !=='http://originaldomaine.com' && Math.floor(Math.random() *101) < 100){
   document.getElementById("cta").src = 'http://site2.com/59870';
}

The purpose is if the the domain doesn't match the original, the js code will call id="cta" to replace it with the site2

Which src you want to change? Within an iframe, do you need to change another iframe's src or the top window's src? — Aruna
– Aruna, Commented Nov 9, 2016 at 1:17
What do you mean about didn't work ? is the iframe src changed all the time? — Mamdouh Saeed
– Mamdouh Saeed, Commented Nov 9, 2016 at 3:13
well the code work as a charm when I use w.href='http://site2.com/59870';} instead of { document.getElementById("cta").src='http://site2.com/59870'; } — Sergio santa
– Sergio santa, Commented Nov 9, 2016 at 3:30

claudios · Accepted Answer · 2016-11-09 01:16:48Z

1

Try this one:

var loc = 'http://site2.com/59870';
document.getElementById('sorror').src = loc;

answered Nov 9, 2016 at 1:16

claudios

6,6768 gold badges51 silver badges98 bronze badges

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

Comments

DDan · Accepted Answer · 2016-11-09 01:17:11Z

1

HTML (it needed a small syntax fix)

<iframe src="http://site1.com/37046"  id="sorror" opacity="0" scrolling="no" margin-top"50px" marginwidth="0" marginheight="0" align="middle" frameborder="0" width="100%" height="160px">
</iframe>

JS

var frame = document.getElementById('sorror');
frame.src = "http://site2.com"

answered Nov 9, 2016 at 1:17

DDan

8,3566 gold badges38 silver badges65 bronze badges

Comments

Aruna · Accepted Answer · 2016-11-09 02:19:40Z

0

You can either use loc.host on left and without http:// on right side (or) combine it with loc.protocol as below.

var loc = window.top.location;
if(loc.protocol + '//' + loc.host !== 'http://originaldomaine.com') {
   document.getElementById("cta").src='http://site2.com/59870';
}

edited Nov 9, 2016 at 2:19

answered Nov 9, 2016 at 1:31

Aruna

12k3 gold badges31 silver badges42 bronze badges

9 Comments

Aruna Over a year ago

Where is the 'cta' exists? same iframe or in top window?

Sergio santa Over a year ago

the same iframe

Sergio santa Over a year ago

still doesn't work, maybe the <iframe> doesn't support call function ?

Aruna Over a year ago

@Sergiosanta call function?

Sergio santa Over a year ago

I just mean Id=cta

|

Mamdouh Saeed · Accepted Answer · 2016-11-09 03:37:04Z

0

but seems didn't work.

I guess that you mean your iframe src always chaging to site2 because:

w.host !=='http://originaldomaine.com' always TRUE, because location.host doesn't include protocol (http(s)://).
Also Math.floor(Math.random() *101) < 100 in almost time will be TRUE. because Math.floor(0.99999999999999994 * 101) === 100.

So your if conditions never be FALSE and your iframe always changing src.

    var w = window.top.location;
    if(w.host !== 'originaldomaine.com' && Math.floor(Math.random() *101) < 100){
     document.getElementById("cta").src = 'http://site2.com/59870';
    }

Extra point: use sandbox attribute in iframe to disable runninig scripts and avoid redirecting.

<iframe src='a.php' sandbox></iframe>

edited Nov 9, 2016 at 3:37

answered Nov 9, 2016 at 3:25

Mamdouh Saeed

2,3231 gold badge12 silver badges11 bronze badges

1 Comment

Sergio santa Over a year ago

there is a misunderstanding here, what Im looking for is if anyone use my script/template in his domain the src=site1.com will change automaticly to src=site2.com via calling the id=cta

Collectives™ on Stack Overflow

change src of <iframe> with javascript

4 Answers 4

Comments

Comments

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related