How to change iframe src with Javascript

1. Directly via JavaScript

You can directly access the iframe element and modify its src attribute. This is the most straightforward approach. Here is a simple example:

Assume we have the following HTML structure:

html
<iframe id="myIframe" src="original_page.html"></iframe>

You can use the following JavaScript code to change the src attribute of this iframe:

javascript
document.getElementById('myIframe').src = "new_page.html";

This code retrieves the iframe element with id myIframe using the getElementById method and directly modifies its src attribute to new_page.html.

2. Using setAttribute() Method

Another approach is to use the setAttribute() method, which is a general way to modify HTML element attributes. Here's how to use this method:

javascript
document.getElementById('myIframe').setAttribute('src', 'new_page.html');

This code also retrieves the iframe element but uses the setAttribute method to update the src attribute. The advantage of this method is that it is more explicit, especially useful when dealing with custom attributes.

Use Cases

• Content Updates: If your webpage needs to load different content based on user actions, you can achieve this by changing the iframe's src, resulting in a smoother user experience without reloading the entire page.
• Permission Control: Some page content may display different content or interfaces based on user permissions. By dynamically changing the iframe's src with JavaScript, you can easily display the appropriate content based on user permissions.

This covers the basic methods for changing the iframe's src attribute using JavaScript.