从一个页面加载div内容并将其显示给另一个页面

时间:2013-08-26 08:54:14

标签: jquery load

几小时我试图从一个页面加载div内容并将其显示给另一个页面。 例如:

我们有this wikipedia page。我希望使用id="mw-content-text"获取div的内容,并将其显示在包含id="result"元素的页面中。

有没有办法只使用javascript / jquery?

5 个答案:

答案 0 :(得分:3)

是的,请参阅http://api.jquery.com/load/上的“加载页面片段”。

简而言之,您在URL后添加选择器。例如:

$('#result').load('ajax/test.html #container');

答案 1 :(得分:2)

首先下载JS文件https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js并在页面中包含js文件。下面是我用来加载外部页面的功能。

   function test () {
     $.ajax({
       url: 'http://external_site.com',
       type: 'GET',
       success: function(res) {
         var content = $(res.responseText).text();
         alert(content);
       }
     });
   }

这对我来说是从外部网站获取内容的。

<强> Reference

答案 2 :(得分:2)

伙计,这可能不可能根据帖子

Origin is not allowed by Access-Control-Allow-Origin

答案 3 :(得分:1)

您总是可以在PHP中使用CURL,从其他站点获取内容,然后您可以使用load()JQuery函数访问PHP并将其显示给该页面上的用户。 假设这个文件命名为:“gatherinfo.php”(JQuery无法从远程站点收集信息,因为我认为它不安全(http://forum.jquery.com/topic/using-ajax-to-load-remote-url-not-working))所以其中一种方法是通过PHP来实现。

<?php
$myData = curl("http://en.wikipedia.org/wiki/Robert_Bales");
echo "$myData";

function curl($url) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
    $data = curl_exec($ch);
    curl_close($ch);
    return $data;
}
?>

但是,请确保在收集此类信息时始终引用来源。 然后通过使用JQuery,您可以调用服务器上的文件,并通过执行以下操作将其显示在您想要的div上:

Javascript :(这将在页面准备好并加载后初始化)

$(document).ready(function(){
    $("#yourDIVID").load("gatherinfo.php");
});

HTML:

<html>
<head>
<script src="yourjqueryfile.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function(){
            $("#yourDIVID").load("gatherinfo.php");
        });
</script>
</head>
<body>
<div id="yourDIVID"> The content you're grabbing would load here </div>
</body>
</html>

如果那是你打算做的事情,你就是这样做的。

答案 4 :(得分:0)

您可以尝试iframe:

<iframe src="http://en.wikipedia.org/wiki/Robert_Bales" frameborder="0"></iframe>