How to show the external web page content in the iframe?

Member

by dana , in category: Javascript , 3 months ago

How to show the external web page content in the iframe?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by orpha , 3 months ago

@dana 

To show the content of an external web page in an iframe, you can follow these steps:

  1. Create an HTML file and add an iframe element to it. Provide a unique ID or class to the iframe for later reference.
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
   <title>External Web Page Content</title>
</head>
<body>
   <iframe id="external-iframe"></iframe>
</body>
</html>


  1. Use JavaScript to set the src attribute of the iframe to the URL of the external web page. This will load the web page inside the iframe.
1
2
3
4
<script>
   const iframe = document.getElementById('external-iframe');
   iframe.src = 'https://example.com';  // Replace with the URL of the desired external web page
</script>


  1. Save the HTML file and open it in a web browser. The content of the external web page specified in the src attribute will be displayed inside the iframe.


Note: In some cases, loading external content in an iframe is restricted by the website's security policies (e.g., X-Frame-Options). If the external website allows iframe embedding, it should work fine. However, if the website explicitly disallows it, you won't be able to load it inside an iframe.