I want to load the html page inside the div

Question

i trying to load a html page inside the div

<a href="#1" title="" class="base-banner" page="www.google.com for example">

<img src="images" alt=""></a> <div id="landingpage"> </div>

Javascript code

$(document).ready(function() {
            $(".base-banner").on("click", function(){  
                $("#landingpage").show().load($(this).attr("page"));

                return false;
            });
        });

It is loading properly when i am loading a local page but if try to load a live page its not working any idea what i have done wrong and needs to done.

Thanks in advance

possible duplicate of [jQuery load external site page](http://stackoverflow.com/questions/14999573/jquery-load-external-site-page) — DaniP, Nov 10 '14 at 12:34

Arkadiusz Kałkus · Answer 1 · 2014-11-10T13:08:40.050

0

You can't because AJAX policy doesn't allow to query pages across domains.

Anyway you can use that workaround:

<div id="siteloader"></div>


$.ajaxSetup({
    scriptCharset: "utf-8", //maybe "ISO-8859-1"
    contentType: "application/json; charset=utf-8"
});

$.getJSON('http://whateverorigin.org/get?url=' + 
    encodeURIComponent('http://google.com') + '&callback=?',
    function(data) {
        console.log("> ", data);
        //If the expected response is text/plain
        $("#target").html(data.contents);
        //If the expected response is JSON
        //var response = $.parseJSON(data.contents);
        //console.log("> ", response);
});

http://jsfiddle.net/SsJsL/2011/

edited Nov 10 '14 at 13:08

answered Nov 10 '14 at 12:41

Arkadiusz Kałkus

17,101
19
69
108

i don't want to use ajax what the main concept is if i click the image it has to show the external domain page in that div – Raju Nov 10 '14 at 12:50
1

Moreover - what about an iframe? – Arkadiusz Kałkus Nov 10 '14 at 12:52
if we use iframe the page takes time to load – Raju Nov 10 '14 at 12:54
1

First, read about **[Cross Domain Policy](http://en.wikipedia.org/wiki/Same-origin_policy)**, here you can find useful information: **[Loading cross domain html page](http://stackoverflow.com/a/17299796/2247494)** _(see comments too)_. Also, as @Landeeyo mentioned, maybe an iframe could be a solution, or you can implement **[CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing)** in the origin and destination, to enable cross-origin resource sharing. – jherax Nov 10 '14 at 13:00
@user3932038 personally I don't believe a slow response can be caused by using an iframe. It too simple mechanism. Try loading some other page, on the other hand examine the page you want to embed. – Arkadiusz Kałkus Nov 10 '14 at 13:08

score 0 · Answer 2 · answered Nov 10 '14 at 13:25

As you are looking to load html file inside div you can play along with Ajax or iframe, i got this code for iframe.

function load_home (e) {
    (e || window.event).preventDefault();
    var con = document.getElementById('content')
    ,   xhr = new XMLHttpRequest();

   xhr.onreadystatechange = function (e) { 
    if (xhr.readyState == 4 && xhr.status == 200) {
      con.innerHTML = xhr.responseText;
    }
   }

xhr.open("GET", "http://www.yoursite.com/home.html", true);
xhr.setRequestHeader('Content-type', 'text/html');
xhr.send();
}

score 0 · Answer 3 · answered Jan 24 '20 at 10:54

This is an old question, but for the ones who found themselves dealing with the same issue, I found out that, if you have not yet opened the page inside the browser, nothing will show up when you try to load the file inside your div.

To overcome this, simply load the page into the browser first (by just typing the name of the page itself, Ex. "http://localhost/myPage.html") and, if it shows up, then it will load the page inside your div.

I didn't quite understand why, I guess it's a matter of loading the page onto the server, or sort of.

Hope it helps.

score 0 · Answer 4 · answered Jan 24 '20 at 11:10

As other pages are not on same domain, browser will restrict content from those pages due to CORS policy.

To overcome that you can bypass using third party proxy like https://cors-anywhere.herokuapp.com/.

Append cors-anywhere link before your URL like below:

$(document).ready(function() {
  $(".base-banner").on("click", function() {
    // check cors-anywhere link below.
    $("#landingpage").show().load('https://cors-anywhere.herokuapp.com/' + $(this).attr("page"));

    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#1" title="" class="base-banner" page="https://www.google.com">

  <img src="images" alt=""> click here </a>
<div id="landingpage"> </div>

Here is a Demo Link.

I want to load the html page inside the div

4 Answers4