Load the page inside of IFRAME using ajax

javascript jquery html ajax iframe

32,666

Solution 1

You can still use src but supply data URL like this:

src = 'data:text/html;charset=utf-8,' + 
    encodeURIComponent( // Escape for URL formatting
        '<!DOCTYPE html>'+
        '<html lang="en">'+
        '<body><h1>Another document!</h1></body>'+
        '</html>'
    );

Solution 2

You can change the location of an iframe with Javascript with a few different methods.

var frame = document.getElementById("iframe");
frame.src = "http://www.sample.com";
frame.contentWindow.location = "http://www.sample.com";
frame.contentWindow.open("http://www.sample.com");

Of course, you must be very careful with iframes. If the iframe points to a foreign domain (ie: "Cross-Origin", ie: NOT the same domain on which the main web page is hosted) you will breach browser security policies and will throw errors if you try to manipulate / read many properties.

Also note that by changing an iframe element's src attribute, the iframe will automatically travel to the new location. However, if you use one of the other two methods I suggested, the src attribute of the iframe element will not change (even though the iframe's content points to a new location).

If you need to get the location of an iframe, you can try:

iframe.contentWindow.location.href;

Again, however, if the iframe is pointing to a site that is not hosted on the same domain, this will cause an error. To be safe, use try {} catch (e) {} blocks.

Solution 3

Make sure to use "http://" before the link, example:

<iframe src="http://www.google.com"></iframe>

Solution 4

If www.sample.com is on the same domain, you can just do this:

<div id = "targetDiv"></div>
<script>
$('document').ready(function() {
    $('#targetDiv').load('www.sample.com');
});
</script>

Though, if it is the same domain, you'd probably use .load('/');

View more solutions

32,666

Author by

Anthony Carbon

Hi guys, I'm a WordPress developer/programmer from 2012 until now. Hope we can share some knowledge on this field and glad to have some good experience with you. I love working in WordPress, doing some customization in theme/plugin is very interisting and that helps me improve more. Hope I can help you too.

Updated on July 23, 2022

Comments

Anthony Carbon almost 2 years
how about loading your page using IFRAME ? I was thinking if this is possible ..

Example, i have this iframe below.
```
<iframe id="iframe" width="1024" height="600" src="http://www.sample.com"></iframe>
```
I want the www.sample.com page to load inside this iframe by not simply add the URL into src attribute, instead I'll get the current page data using ajax and to load using IFRAME tag. I'm thinking about this because I have a big problem on IFRAME cache most of the time.

I also try this thing but, it does not work perfectly on my end.
```
<iframe id="iframe" width="1024" height="600" src="http://www.sample.com?random=1422841682605""></iframe>
```
random is change everytime i load this iframe.

I want to apply it on my responsive tool like on the image below. If you need an actual view click here.

Thanks guys if have some idea out there .