我想在 div 中加载 html 页面答案

【问题标题】：I want to load the html page inside the div我想在 div 中加载 html 页面
【发布时间】：2014-11-10 12:28:59
【问题描述】：

我试图在 div 中加载一个 html 页面

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

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

Javascript 代码

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

                return false;
            });
        });

当我加载本地页面时它可以正常加载，但是如果尝试加载实时页面，它不知道我做错了什么并且需要做。

提前致谢

【问题讨论】：

jQuery load external site page 的可能重复项

标签： jquery html css

【解决方案1】：

您不能，因为 AJAX 政策不允许跨域查询页面。

无论如何您都可以使用该解决方法：

<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/

【讨论】：

我不想使用 ajax 主要概念是什么，如果我点击它必须在该 div 中显示外部域页面的图像
此外 - iframe 怎么样？
如果我们使用 iframe 页面需要时间加载
首先，了解一下Cross Domain Policy，在这里您可以找到有用的信息：Loading cross domain html page （也请参阅 cmets）我>。另外，正如@Landeeyo 提到的，iframe 可能是一种解决方案，或者您可以在起点和终点实施 CORS，以实现跨域资源共享。
@user3932038 我个人认为使用 iframe 不会导致响应缓慢。它的机制太简单了。尝试加载其他页面，另一方面检查您要嵌入的页面。

【解决方案2】：

当您希望在 div 中加载 html 文件时，您可以与 Ajax 或 iframe 一起玩，我得到了 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();
}

【讨论】：

【解决方案3】：

这是一个老问题，但对于那些发现自己正在处理同样问题的人，我发现如果您还没有在浏览器中打开页面，当您尝试加载文件时不会显示任何内容在你的 div 里面。

要克服这个问题，只需先将页面加载到浏览器中（只需输入页面本身的名称，例如“http://localhost/myPage.html”），如果它出现，那么它将在你的 div 中加载页面.

我不太明白为什么，我猜这是将页面加载到服务器上的问题，或者类似的问题。

希望对你有帮助。

【讨论】：

【解决方案4】：

由于其他页面不在同一个域中，浏览器将根据CORS 政策限制来自这些页面的内容。

要克服这个问题，您可以使用 https://cors-anywhere.herokuapp.com/ 等第三方代理绕过。

在您的 URL 之前添加 cors-anywhere 链接，如下所示：

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

这是Demo Link。

【讨论】：