【问题标题】:Load website into DIV将网站加载到 DIV
【发布时间】:2010-11-17 06:51:54
【问题描述】:

当我在文本框中写入 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>

【问题讨论】:

    标签: jquery load


    【解决方案1】:

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

    有两种方法。

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

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

    【讨论】:

      【解决方案2】:

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

      【讨论】:

        【解决方案3】:

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

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

        比,假设你把proxy.php放在html页面的同一目录下:

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

        【讨论】:

          【解决方案4】:

          是的,浏览器不允许向其他域站点发出 AJAX 请求,我也遇到了同样的问题,并按照 workmad3 的提示进行了操作,如下所示:

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

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

          【讨论】:

            【解决方案5】:

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

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

            2.in index.html .

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

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2020-10-18
              • 2022-11-04
              • 1970-01-01
              • 2011-12-30
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多