Using iFrames to switch sources repeatedly

Question

Using iFrames to switch sources repeatedly

I have created an iFrame and I am looking to dynamically change its source to one of 10 different URLs each time it loads:

Here is the desired behavior:

iFrame loads => change to example.com => iFrame loads => change to example1.com => iFrame loads => change to example2.com...

Is there a way to achieve this functionality? I am currently stuck on how to proceed and would appreciate any guidance.

<html>
<body>
<iframe src="http://www.example.com"> </iframe>
<script>   
var links = [
"http://www.js.com", 
"http://example.com", 
"http://example1.com"];

alert(links[2])

function srca (){
document.getElementsByTagName('iframe')[0].src = links[0]
}


</script>
</body>
</html>

javascript iframe src

Answer 1

Answer №1

It seems like you were close, but you just needed to remember to connect to an event (such as onload)..
To help you out, here is a starting point:

<html>
<head>
<script>   
var links = [ 'http://www.js.com'
            , 'http://example.com' 
            , 'http://example1.com'
            ]
,  lnkCnt = 0
;
function srca(){
   links.length > lnkCnt && (
     document.getElementsByTagName('iframe')[0].src = links[lnkCnt++]
   );
}
</script>
</head>
<body>
<iframe src="about:blank" onload="setTimeout(srca, 2000);"></iframe>

</body>
</html>

Answer 2

It seems like you were close, but you just needed to remember to connect to an event (such as onload)..
To help you out, here is a starting point:

<html>
<head>
<script>   
var links = [ 'http://www.js.com'
            , 'http://example.com' 
            , 'http://example1.com'
            ]
,  lnkCnt = 0
;
function srca(){
   links.length > lnkCnt && (
     document.getElementsByTagName('iframe')[0].src = links[lnkCnt++]
   );
}
</script>
</head>
<body>
<iframe src="about:blank" onload="setTimeout(srca, 2000);"></iframe>

</body>
</html>

Using iFrames to switch sources repeatedly

Answer №1

Similar questions

Angular JS has the capability to toggle the visibility of elements on a per-item basis as well as

Issue of Vue not resolving Ionic back button component

Techniques for manipulating multiple circles with JavaScript

Inquiries about utilizing setTimeout with backbone.js and effectively managing timeouts

Cease / Cancel Ajax request without activating an error signal

Error message: Unexpected token "(" in the asynchronous aspect of Meteor

using absolute URLs for image source in JavaScript

Showing text on an ajax loader

What causes the selection of the menu item $invalid to always return as true?

Getting started with JavaScript arguments can be overwhelming for newcomers

Restricting JQuery pop-up to be shown only once

Uploading and saving data to an object in FaunaDB using React hook forms

What is the best way to distinguish the compiled files from the source code, while still being able to test and view Express views directly from the source?

How long is a 2D array in JavaScript after adding an element?

Interested in transforming and showcasing dates within a MySQL database?

Tips for displaying website preloader just once

transferring data from JavaScript on the client side to Express on the server side

Create a word filter that doesn't conceal the words

There will be no pop-up notification displayed if the product is already in the cart

Empty area beneath the body in Chrome Device Mode