I would like to embed the HTML page within the specified div element

Question

I would like to embed the HTML page within the specified div element

When attempting to load a HTML page inside the div, I encountered the following issue:

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

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

Here is the JavaScript code being used:

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

                return false;
            });
        });

The loading works properly when trying to load a local page, but fails when attempting to load a live page. Any insights on where I went wrong and what needs to be corrected would be greatly appreciated.

Thank you in advance for your help.

jquery html css

Answer 1

Answer №1

It is not possible to query pages across domains due to AJAX policy restrictions.

However, a workaround solution can be implemented using the following code snippet:

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


$.ajaxSetup({
    scriptCharset: "utf-8", //possibly "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/

Answer 2

It is not possible to query pages across domains due to AJAX policy restrictions.

However, a workaround solution can be implemented using the following code snippet:

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


$.ajaxSetup({
    scriptCharset: "utf-8", //possibly "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/

Answer 3

Answer №2

If you're trying to embed an html file within a div, there are a few ways to achieve this – one option is using Ajax or iframe. Below is a sample code snippet for loading the content using an 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();
}

Answer 4

If you're trying to embed an html file within a div, there are a few ways to achieve this – one option is using Ajax or iframe. Below is a sample code snippet for loading the content using an 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();
}

Answer 5

Answer №3

This question may be old, but for those facing the same issue, I discovered that if you haven't opened the page in your browser first, nothing will display when trying to load the file into your div.

To solve this, simply open the page in your browser by typing the page's name (e.g., "http://localhost/myPage.html"). If it displays correctly, then it will load inside your div.

I'm not entirely sure why this is necessary, perhaps it has to do with loading the page onto the server or something similar.

I hope this explanation helps.

Answer 6

This question may be old, but for those facing the same issue, I discovered that if you haven't opened the page in your browser first, nothing will display when trying to load the file into your div.

To solve this, simply open the page in your browser by typing the page's name (e.g., "http://localhost/myPage.html"). If it displays correctly, then it will load inside your div.

I'm not entirely sure why this is necessary, perhaps it has to do with loading the page onto the server or something similar.

I hope this explanation helps.

Answer 7

Answer №4

Due to the CORS policy, content from pages on different domains may be restricted by the browser.

To bypass this restriction, you can use a third-party proxy like .

To implement this, simply add the cors-anywhere link before your URL as shown below:

$(document).ready(function() {
  $(".base-banner").on("click", function() {
    // Use the cors-anywhere link provided 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>

Check out this Demo Link.

Answer 8

Due to the CORS policy, content from pages on different domains may be restricted by the browser.

To bypass this restriction, you can use a third-party proxy like .

To implement this, simply add the cors-anywhere link before your URL as shown below:

$(document).ready(function() {
  $(".base-banner").on("click", function() {
    // Use the cors-anywhere link provided 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>

Check out this Demo Link.

I would like to embed the HTML page within the specified div element

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Optimal arrangement for z-index and opacity

What is the best way to trigger a jQuery function when an option is selected from a Select2 dropdown menu?

Implementing jQuery into cfdiv component

Conceal information from view without hiding pseudo content visually

Unexpected CSS counter reset issue encountered within nested elements

Ways to remove border when image is not present

Incorporate JavaScript values into an HTML form to submit them to PHP

Can you provide instructions on how to use the jquery ajax post method to upload data to a MYSQL database

React not displaying wrapped div

How can you verify the validity of data in Laravel datatables?

Why is the outline buttons class only displaying gray colors for me?

Loading necessary CSS when needed in React JS

Is there a way to send a variable to the alert function using $.ajax()?

What is the method for adjusting the text color in an HTML document?

Incorporating a variety of images into this hexagonal design framework

Unlock the Power of jQuery Plugins: Implementing Global Settings Modifications

Using jQuery to import certain library causes the XPage to completely lock up

Exporting an HTML table to Excel while excluding any hidden <td> elements

Choosing Tags with Ajax in Select2

How can you extract a JSON object from a JSON array based on a key that is associated with a specific JSON