jQuery 将网站加载到 DIV

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1237707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 10:58:59  来源:igfitidea点击:

Load website into DIV

jqueryload

提问by Andrea Fiore

how do i actually retrieve data from a website when i write the URL in a textbox and then hit the submit button. I want the data to be put in an div that i have. Is this possible?

当我在文本框中写入 URL 然后点击提交按钮时,我如何实际从网站检索数据。我希望将数据放入我拥有的 div 中。这可能吗?

I have tried with this, but it doesn't work!

我已经尝试过这个,但它不起作用!

<script type="text/javascript"> 
function contentDisp()
{
var url = $("#text").val();
$("#contentArea").load(url);
}
</script> 



<textarea id="text">Write URL here</textarea>
<br />
<input type="button" value="Click" onClick="contentDisp();">

<div id="contentArea"></div>

回答by workmad3

Due to the sandbox on javascript calls, you can't do this (you can't call outside the domain the JS was loaded from), at least not directly

由于 javascript 调用的沙箱,你不能这样做(你不能在加载 JS 的域之外调用),至少不能直接调用

There are 2 methods around this.

有两种方法可以解决这个问题。

The first would be to load the requested url in an iframe rather than a div by setting the src parameter using JS. Simple, easy but would limit your access to the data in the iframe.

第一种是通过使用 JS 设置 src 参数在 iframe 而不是 div 中加载请求的 url。简单,容易,但会限制您对 iframe 中数据的访问。

The second would be to make an AJAX request on your server and your server then looks up the URL and returns the HTML content (pretty easy to do with CURL or similar). This lets you play around with the returned content a bit more, but again due to the sandbox on cookies you won't be able to request anything like a users facebook page or anything that requires a session as it would be working through the servers session and not the browser session.

第二种方法是在您的服务器上发出 AJAX 请求,然后您的服务器查找 URL 并返回 HTML 内容(使用 CURL 或类似方法很容易做到)。这让您可以更多地处理返回的内容,但同样由于 cookie 上的沙箱,您将无法请求任何像用户 facebook 页面或任何需要会话的东西,因为它会通过服务器会话工作而不是浏览器会话。

回答by Andrea Fiore

Given that it will not be capable of doing logins or http authentications (for enabling that you can use curl or another http client), this php one liner can be used as a proxy to load content from other sites

鉴于它无法进行登录或 http 身份验证(以便您可以使用 curl 或其他 http 客户端),这个 php one liner 可以用作代理从其他站点加载内容

/* proxy.php */
<?php echo file_get_contents($_GET['url']);?>

than, assuming that you place proxy.php in the same directory of the html page:

比,假设您将 proxy.php 放在 html 页面的同一目录中:

$("#contentArea").load('proxy.php?url=http://example.com');

回答by mishac

Is the URL on the same domain as the page itself? For security reasons most browsers will not allow cross site AJAX requests. For more info on why see link text

URL 是否与页面本身在同一个域中?出于安全原因,大多数浏览器不允许跨站点 AJAX 请求。有关原因的更多信息,请参阅链接文本

回答by Ivan

It's right, the browsers not allow AJAX request to others domain sites, I had the same problem and did the workmad3's tip, something like this:

没错,浏览器不允许向其他域站点发送 AJAX 请求,我遇到了同样的问题并做了 workmad3 的提示,如下所示:

$(document).ready(function(){
     $('#url').change(function(){
          var _url=$(this).val();
          $('#webDisplay').attr('src',_url);
     });
});

where my url ID is a INPUT text, very nice trick

我的 url ID 是一个 INPUT 文本,非常好的技巧

回答by Ana El Bembo

1.make a file load.phpin your server.

1.在你的服务器中创建一个文件load.php

<?php echo file_get_contents($_GET['u']); ?>

2.in index.html.

2.在index.html 中

<script type="text/javascript"> 
function contentDisp()
{
  var url = $("#text").val();
  $("#contentArea").load('load.php?u='+url);
}
</script>