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.




    });

Answer 1

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
       });
    });

Answer 2

$('#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'>

Answer 3

Here are 3 methods that can help you achieve that:

1. Load the page on an <iframe> by changing its src. Example fiddle:

   YourFrameId.src = 'http://example.com';
   

2. 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); 
   

3. Use the location attribute of the document object:

   document.location = 'http://example.com'