load data of page in URL using javascript

Question

I have an HTML page which I want to load on a click of a class using JavaScript. I am thinking of fetching that HTML using an iframe. This page contains content in the form of an overlay.

I have used .load() function of jQuery but it does not do anything. The pages I am working are both in same domain so I was hoping that the page would have loaded.

How can I achieve this?

$(".popup-layout").click(function() {

// I want to load an iframe here. Where should that iframe sit on the current page with diplay:none.




    });

I was hoping that on click of the class .popup-layout, i fetch the page localhost:8080/abc.html using javascript. I have got just this javascript. — Sam Thadhani, Jun 26 '14 at 01:28
possible duplicate of [How do I load an url in iframe with Jquery](http://stackoverflow.com/questions/7177080/how-do-i-load-an-url-in-iframe-with-jquery) — Yaje, Jun 26 '14 at 01:34

score 0 · Answer 1 · answered Jun 26 '14 at 01:28

0

$('#result') is an <iframe id='result'>? You can't populate an iframe via jquery.load(). In fact, you don't need to. You can use a simple <div id='result'>

answered Jun 26 '14 at 01:28

derpirscher

14,418
3
18
35

actually you can. using `.attr()` – Yaje Jun 26 '14 at 01:31
You mean setting the src attribute of the iframe? Of course you can do that, but that has nothing to do with jquery.load() – derpirscher Jun 26 '14 at 01:49

arielnmz · Answer 2 · 2014-06-26T01:43:03.093

Here are 3 methods that can help you achieve that:

Load the page on an <iframe> by changing its src. Example fiddle:
```
YourFrameId.src = 'http://example.com';
```

Load the page via an HTTP request and change the innerHTML of an existent element. Example fiddle:

var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.onreadystatechange = function (aEvt) {
    if (req.readyState == 4 && req.status == 200) {
        YourElementId.innerHTML = req.responseText;
    }
};
req.send(null);

Use the location attribute of the document object:
```
document.location = 'http://example.com'
```

score 0 · Accepted Answer · answered Jun 26 '14 at 01:34

0

I would use ajax loaded content over an iframe, just my opion though.

$(".popup-layout").click(function() {
       $.get("yourFile.html", function(data){
        $("#Content").html(data); // the div to load content in
       });
    });

answered Jun 26 '14 at 01:34

Mark

4,773
8
53
91

load data of page in URL using javascript

3 Answers3