Kendi html sayfalarına içerik gömmek için başkaları için kod sunmak nasıl?

3 Cevap php

Belki bu soruya cevabı ben bunu yapıyorum daha az karmaşık ...

Ben bir Zend Framework PHP web uygulaması var. Ben basit bir API oluşturmak için gidiyorum Kullanıcının hesabı için çıktı bir rapor olacak. Içerik bu kadar basit olacaktır:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Ben kullanıcı kendi sitesinde raporunu gömmek için kullanabileceğiniz bir kod parçacığını sunmak istiyoruz.

Ben bu Düşünüyorum bir iFrame ile yapılabilir, ama ben daha önce hiç yapmadım bu yüzden bunu yapmak için en iyi yol bilmiyorum.

Mümkünse Update:, ben de içeriği stil kullanıcı için yeteneği sunmak istiyorum. O bir iFrame ile mümkün mü? Ben gömülü içeriği mümkün olduğunca sayfanın geri kalanı gibi bakmak istiyorum.

3 Cevap

Ceejayoz & Joe, şimdiden 2 temel seçenekleri, Javascript veya IFrame örtülü var.

Eğer bazı örnekler kontrol etmek istiyorsanız, yapmanız gereken çalıştığınız tam olarak ne yapar ve bir kullanıcının kendi web sitesinde StackOverflow kullanıcı bilgi kutusu gömmek için izin, StackOverflow flair feature bakabilirsiniz.

Eğer nasıl uygulandığı görmek istiyorsanız kullanıcı kendi sayfasından çağırır, hangi, bir kullanıcı bir IFrame ile bağlantı olur html, hangi kontrol veya bu Javascript. (SO flair sayfada "nasıl kullanabilirim" altında notlara bakın.)

[Kendiniz için ilgili html / js dosyaları görmek için bu bağlantıları kullanıcı numarası eklemek gerekir.]

SO durumunda, js / html, her bir kullanıcı için özel üretilir. Şeyiyle ben bu elde StackOverflow js / html dahil ettik.

Çalıştırıldığında JavaScript: Bu temelde kafasına SO css dosyasına bir bağlantı enjekte kullanıcıların html sayfası içine bir komut dosyası öğesini yazar görebilirsiniz. Sonra sadece css tarz olsun bazı oldukça basit div / span etiketleri içerir. Onlar farklı stil istiyorsa Açıkçası, bu durumda kullanıcı yerine kendi css sağlayabilir.

document.write('
<script>
  var link = document.createElement(\"link\");
  link.href = \"http://stackoverflow.com/content/flair-Default.StackOverflow.css\";
  link.rel = \"stylesheet\";
  link.type = \"text/css\";
  var head = document.getElementsByTagName(\"head\")[0];
  head.appendChild(link);
</script>

<div class=\"valuable-flair\">   
<div class=\"gravatar\">       
  <a title=\"See my profile on Stack Overflow\" target=\"_blank\" href=\"http://stackoverflow.com/users/1/jeff-atwood\">
    <img src=\"http://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=50&amp;d=identicon&amp;r=PG\" height=\"50\" width=\"50\" alt=\"\">
  </a>  
</div>   
<div class=\"userInfo\">        
<span class=\"username\">
  <img src=\"http://sstatic.net/so/favicon.ico\" />
  <a href=\"http://stackoverflow.com/users/1/jeff-atwood\" target=\"_blank\">Jeff Atwood</a>
  <span class=\"mod-flair\" title=\"moderator\">&#9830;</span>
</span>
<br />       
<span class=\"reputation-score\" title=\"reputation score\">16,907</span>        
<br />
<span title=\"5 gold badges\"><span class=\"badge1\">&#9679;</span>
<span class=\"badgecount\">5</span></span><span title=\"55 silver badges\">
<span class=\"badge2\">&#9679;</span><span class=\"badgecount\">55</span></span>
<span title=\"72 bronze badges\"><span class=\"badge3\">&#9679;</span>
<span class=\"badgecount\">72</span></span>\r\n    </div>\r\n</div>'
);

Html - IFrame için: Bu kafa css link ve vücutta içerik dahil olmak üzere gerekli her şeyi içeren tam bir HTML belgesi (XHTML aslında bilgiçlik taslayan olmak) olduğunu görebilirsiniz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
            <link rel="stylesheet" href="http://sstatic.net/so/flair-Default.StackOverflow.css" />                
</head>

<body>
    <div class="valuable-flair">
    <div class="gravatar">
        <a title="See my profile on Stack Overflow" target="_blank" href="http://stackoverflow.com/users/1/jeff-atwood"><img src="http://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=50&amp;d=identicon&amp;r=PG" height="50" width="50" alt=""></a>
    </div>

    <div class="userInfo">
        <span class="username"><img src="http://sstatic.net/so/favicon.ico" /><a href="http://stackoverflow.com/users/1/jeff-atwood" target="_blank">Jeff Atwood</a><span class="mod-flair" title="moderator">&#9830;</span></span>
        <br />
        <span class="reputation-score" title="reputation score">16,907</span>
        <br />
        <span title="5 gold badges"><span class="badge1">&#9679;</span><span class="badgecount">5</span></span><span title="55 silver badges"><span class="badge2">&#9679;</span><span class="badgecount">55</span></span><span title="72 bronze badges"><span class="badge3">&#9679;</span><span class="badgecount">72</span></span>

    </div>
</div>       
</body>
</html>

Onun çok basit at:

. Bir js dosyası ile oluşturun:

document.write("<ul>");
document.write("  <li>Item 1</li>");
document.write("  <li>Item 2</li>");
document.write("</ul>");

Kullanıcıların daha sonra görünmesini gömülü kodu istediği yere bu kodu içerir:

<script type="text/javascript" src="http://example.com/path/to/file.js"></script>

Bu yaklaşım onları içerik şekillendirebilirsiniz. Onlar bir IFRAME stil mümkün olmaz, ama IFRAMEable widget'lar sağlayan bazı siteler kullanıcı bir kurulum sayfasında vb renkler, arka plan resimleri, almak için izin vererek bu çözmek.

iFrame iyi çalışacaktır. Bir ajax arama çalışmak istiyorsunuz, ancak Google ne yapmak zorunda ve bunları sitenizde de bir src komut dosyası eklemek olurdu. iFrames temelde içerik alanına bir sayfa yükleme div etiketleri vardır. Onlar başka bir blok düzeyi öğesi gibi tüm CSS argümanlar vb yazı tipi, renk, gibi iç içeriği için kaydetmek almak

etiketler