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

Member

by dana , in category: Javascript , a year ago

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

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by orpha , a year 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.

Related Threads:

How to show insecure content in iframe?
How to load external json data from a web api in d3.js?
How to show content on click in wordpress?
What is external page caching in drupal?
How to show content for each custom tab in woocommerce?
How do you properly handle caching static web content?