嵌入网站的一部分 [英] Embedding part of a web site

问题描述

假设我想将我最喜爱的网络漫画之一的最新漫画嵌入到我的网站中作为一种促销手段。 webcomic在div中带有一个带有id的条，所以我想我可以在我的网站中嵌入div，除了我找不到任何代码示例来说明如何做到这一点（它们都显示如何嵌入flash或整个网站）。
有人可以告诉我（或告诉）它是如何完成的？

PS我宁可不使用服务器端脚本或外部服务（这是什么通常建议嵌入RSS）。

解决方案

更新 - 使用jQuery进行跨域请求（客户端）

昨天我浏览James Padolsey的博客，他在那里发表了一篇很棒的文章，介绍了如何做跨域请求与jQuery，也克里斯海尔曼有一个很好的 DEMO 。

原理是使用 YQL - >一个用于网页查询的雅虎api，您可以在其中收到带有所有html的JSON。快乐刮：）

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

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

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

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

将所有内容放在一起

1. 在您想要显示远程连环漫画的页面上创建 div 我们称之为 update-comic

    < div id = 更新漫画> 
   <！ - 这里有内容被抓取 - > 
   < / div> 
     




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

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

    <？php 
    $ url ='http://www.example.com/'; 
    $ response = file_get_contents（$ url）; 
    echo $ response; 
     




3. 现在出现了 jQuery 在您的PHP刮板上，并只采取您感兴趣的相关元素。将此脚本放入您的视图页面（您有< div id =update-comic />

    < script type =text / javascript> 
    $（function（）{
    //设置所有您需要的变量
    var 
    localUrl ='/comic-scrape.php'，
    elementId ='＃remote-comic-id '，
    elementToUpdate = $（'＃update-comic'）; 
    
    //使用elementId内容更新本地elementToUpdate 
    //从localUrl中的php中获取
    
    elementToUpdate.load（localUrl +''+ elementId; 
   }）; 
   < / script> 
     

使用simplexml和xpath

使用simplexml和xpath

h2>

正如philfreo建议的那样n评论，一个可行的解决方案也可以包含选择所需的id服务器端。使用php的simplexml和一个xpath非常简单：

 <？php 
 
 //设置远程url和div id被发现
 $ elementId ='remote-comic-id'; 
 $ url ='http://www.example.com/'; 
 
 //实例化简单的xml元素并从$ url填充
 $ xml = new SimpleXMLElement（$ url，null，true）; 
 
 //通过id找到所需的div 
 $ result = $ xml-> xpath（// div [id = {$ elementId}]）; 
 
 //从数组中取第一个元素，这是我们想要的div 
 $ div = array_pop（$ result）; 
 
 echo $ div; 
  

Suppose I want to embed the latest comic strip of one of my favorite webcomics into my site as a kind of promotion for it. The webcomic has the strip inside of a div with an id, so I figured I can just embed the div in my site, except that I couldn't find any code examples for how to do it (they all show how to embed flash or a whole website). Can someone please show me (or tell) how it's done?

PS I'd rather not use server side scripting or external services (which is what is often recommended for embedding RSS).

解决方案

Update - Cross domain request with jQuery (on client side)

Yesterday I was browsing James Padolsey's blog, where he posted a great article, on how to do cross domain request with jQuery, also Chris Heilmann has a nice DEMO.

The principle is to use YQL -> a yahoo api for web page queries, where you receive a JSON with all the html. Happy scraping :)

Scrape remote data with php, load with jQuery

What about considering simple AJAX call, that would intercept the comic element and update with its contents your <div id="update-comic" /> primarily used for this purpose?

Also you will use a simple php to get the remote page, cause you cannot make ajax call on another domain

note: user must have JavaScript enabled, also following code uses jQuery library

Putting it all together

1. on your page, where you want to display remote comic strip create a div only for this purpose, lets call it update-comic

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

2. write down the php, call it comic-scrape.php, it will download the html from remote page, you should consider caching the response and updating it on a specified interval (e.g. 30min, 1hr, your call.. :))

   server performance should not suffer after simple cache checking implementation

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

3. now comes the jQuery magic, where you make ajax call on your php scraper and take only the relevant element you are interested in. Place this script inside your view page (where you have your <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>
   

I hope, I covered everything.

Employing simplexml and xpath

As philfreo suggested in comment, a viable solution could also contain selecting the required id server-side. It is very easy with use of php's simplexml and a little 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;

这篇关于嵌入网站的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！