将网站加载到DIV中

Question

当我在文本框中输入URL并点击提交按钮时，我该如何从网站实际获取数据。我希望数据能够放在我预先设定的div中。这种操作可行吗？

我尝试过以下方法，但它不起作用！

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

- Pete

Answer 1

由于javascript调用的沙盒限制，您不能直接这样做(您无法调用JS所加载的域之外的内容)。

有两种解决方法。

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

第二种是在您的服务器上发起一个AJAX请求，然后您的服务器查找URL并返回HTML内容(使用CURL或类似工具很容易做到)。这样可以更自由地操作返回的内容，但由于cookie的沙盒限制，您将无法请求像用户Facebook页面之类需要session的内容，因为它将通过服务器的session而不是浏览器的session工作。

- workmad3

Answer 2

考虑到它无法进行登录或http身份验证（如果需要，可以使用curl或其他http客户端来启用），这个php一行代码可以用作代理，从其他网站加载内容。

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

假设您将proxy.php放置在HTML页面的相同目录中，则如下所示：

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

- Andrea Fiore

Answer 3

URL是否与页面本身位于同一域名下？出于安全原因，大多数浏览器不允许进行跨站点AJAX请求。如需更多相关信息，请参见链接文本。

- mishac

Answer 4

没错，浏览器不允许向其他域名的网站发出AJAX请求，我也遇到了同样的问题，并采用了workmad3的提示，类似于这样：

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

其中我的URL ID是一个输入文本，非常不错的技巧

- Ivan

Answer 5

1. 在您的服务器上创建一个名为load.php的文件。

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

2.在 index.html 中。

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

- Ana El Bembo