html - 嵌入网站的一部分

Question

假设我想将我最喜欢的网络漫画之一的最新漫画嵌入到我的网站中，作为对其的一种促销。网络漫画在带有 id 的 div 内有 strip ，所以我想我可以将 div 嵌入我的网站，只是我找不到任何代码示例来说明如何做到这一点(它们都展示了如何嵌入 flash 或整个网站)。有人可以告诉我(或告诉)它是如何完成的吗？

PS 我宁愿不使用服务器端脚本或外部服务(这是嵌入 RSS 时经常推荐的)。

Answer 1

更新 - 使用 jQuery 的跨域请求(在客户端)

昨天我正在浏览 James Padolsey 的博客，他在其中发布了一篇关于如何做的很棒的文章 cross domain request使用 jQuery，Chris Heilmann 也有一个不错的 DEMO .

原理就是用YQL -> 用于网页查询的 yahoo api，您可以在其中收到包含所有 html 的 JSON。快乐刮:)

用php抓取远程数据，用jQuery加载

如何考虑简单的 AJAX 调用，它会拦截漫画元素并使用其内容更新您的 <div id="update-comic" />主要用于此目的？

此外，您将使用一个简单的 php 来获取远程页面，因为您无法在另一个域上进行 ajax 调用

注意:用户必须启用 JavaScript，以下代码也使用 jQuery 库

综合考虑

1. 在您的页面上，您想要显示远程漫画的地方创建一个 div 仅用于此目的，我们将其命名为 update-comic

   <div id="update-comic">
       <!-- here comes scraped content -->
   </div>
   

2. 记下php，称它为comic-scrape.php ，它将从远程页面下载 html，您应该考虑缓存响应并在指定的时间间隔更新它(例如 30 分钟，1 小时，您的电话.. :))

   服务器性能在简单缓存检查实现后不应受到影响

   <?php
       $url = 'http://www.example.com/';
       $response = file_get_contents($url);
       echo $response;
   

3. 现在出现了 jQuery 魔法，您可以在其中对 php 抓取程序进行 ajax 调用，并只获取您感兴趣的相关元素。将此脚本放入您的查看页面(你有你的 <div id="update-comic" />

   <script type="text/javascript">
   $(function () {
       // set all your required variables
       var 
           localUrl = '/comic-scrape.php',
           elementId = '#remote-comic-id',
           elementToUpdate = $('#update-comic');
   
           // update the local elementToUpdate with elementId contents
           // from your php in localUrl
   
           elementToUpdate.load(localUrl + ' ' + elementId;
   });
   </script>
   

我希望，我涵盖了所有内容。

使用 simplexml 和 xpath

正如 philfreo 在评论中建议的那样，一个可行的解决方案还可以包含在服务器端选择所需的 ID。使用 php 的 simplexml 和一点 xpath 非常容易:

<?php

    // set remote url and div id to be found
    $elementId = 'remote-comic-id';
    $url = 'http://www.example.com/';

    // instantiate simple xml element and populate from $url
    $xml = new SimpleXMLElement($url, null, true);
    
    // find required div by id
    $result = $xml->xpath("//div[id={$elementId}]");
    
    // take first element from array, which is our desired div
    $div = array_pop($result);

    echo $div;