How to load iframe in div by ajax?

by scotty_walker , in category: HTML & CSS , a month ago

How to load iframe in div by ajax?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by addison , a month ago

@scotty_walker 

To load an iframe in a div using AJAX, you can follow these steps:

  1. Create a div element where you want the iframe to be loaded:
1
<div id="iframeContainer"></div>


  1. Create a function that uses AJAX to retrieve the content of the iframe and load it into the div:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function loadIframe(url) {
    $.ajax({
        url: url,
        dataType: 'html',
        success: function(response) {
            $('#iframeContainer').html(response);
        },
        error: function() {
            $('#iframeContainer').html('Error loading iframe content');
        }
    });
}


  1. Call the function with the URL of the iframe you want to load:
1
loadIframe('http://example.com/iframe.html');


  1. Make sure you have included jQuery in your project, as the code snippet above uses jQuery for the AJAX call.


With these steps, you should be able to load an iframe into a div using AJAX.