Note: There are some websites those can not be shown in <iframe>, we will discuss this further in the article.
<iframe id="" src="" style=""></iframe>
The src member of the <iframe> object holds the source of the embedded webpage. We can statically assign the address to it, and dynamically change it on runtime as well discuss below:
Get source from input field.
let geeks = document.getElementById("<id name/class name>").value;
Assign the input to the ‘src‘ member of the iframe.
document.getElementById("<id name/class name>").src = geeks;
Below is the code that illustrates the use of iframe.
When the page is loaded, the default page looks like below
After entering new webpage source into the input field and pressing “Change Webpage” button.
If <iframe> is not working ?
Websites like google.com, facebook.com, messenger.com and many more doesn’t support iframe due to some same origin conflicts.
Here is the error you will get in the console if you tried to load those websites which doesn’t supports iframe.
- You will need to apply “http://” or “https://” before the website address otherwise it will give error.
- Keep in mind about those websites which doesn’t supports the iframe.