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

"Discover the magic of creating a navigation menu with jQuery toggle - let me show

Comparing the special features of jQuery Sortable+Droppable and Draggable functionality

Enable the feature for users to upload images to a specific folder within the Chrome extension without the need for

Initiating a conversation from deep within a conversation using JQuery Mobile

The servlet is notified of a request with no data being sent from

Is there a way to modify certain parameters of a plugin without the need to directly edit the

JavaScript/CSS memory matching game

Tips for preserving the status of a sidebar

Unspecified origins of Js in Chrome Extension

Display a spinning wheel or progress bar while the website is in the process of loading

Using the MVC framework, showcase a collection of images in real-time using AJAX and JQUERY

Looking to display or conceal a text box with a date picker based on the selection of a specific value from a drop-down menu

Steps for implementing a datepicker in a dynamically generated element

Using JQuery and PHP to make an Ajax request and handle JSON response

Event follows activation of trigger click

Tips to prevent redirection in a JavaScript function

Validate and send a Django form using Ajax while utilizing django-crispy-forms

Difficulty navigating through pages on an iPad due to slow scrolling with JavaScript

Display the accurate duration based on the dates selected in an HTML form automatically

Ways to manage the order of RequestExecutor execution