如何爲他人提供代碼以將您的內容嵌入到他們的html頁面中？

也許這個問題的答案不如我正在做的那麼複雜...如何爲他人提供代碼以將您的內容嵌入到他們的html頁面中？

我有一個Zend Framework PHP web應用程序。我將創建一個簡單的API來輸出用戶帳戶的報告。內容將如此簡單：

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

我想提供一個代碼片段，用戶可以使用該代碼片段將報告嵌入到自己的網站中。

我在想這可以用iFrame來完成，但我從來沒有這樣做過，所以我不知道這樣做的最佳方式。

更新：如果可能，我還想爲用戶提供樣式化內容的能力。這可能與一個iFrame？我希望嵌入式內容儘可能地像頁面的其餘部分一樣。

來源

2009-12-14 Andrew

在其最簡單的很：

創建一個.js文件：然後

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

您的用戶將包括驗證碼的地方，他們希望你的嵌入式代碼出現：

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

這種方法允許他們設計內容。他們將無法設置IFRAME，但某些提供IFRAMEable小部件的網站通過允許用戶在設置頁面上選擇顏色，背景圖像等來解決此問題。

來源

2009-12-14 23:09:39 ceejayoz

iFrame將工作得最好。 ajax調用可以工作，但是你必須做Google的工作，並讓他們在你的網站上包含一個src腳本。 iFrames基本上是將頁面加載到內容區域的div標籤。他們把所有的CSS參數，像任何其他塊級元素的內部內容保存，如字體，顏色等

來源

2009-12-14 23:10:04

現在，OP已經指出內容應該是可修改的，IFRAME可能不是最好的選擇，除非他願意讓IFRAME可配置。 – ceejayoz 2009-12-14 23:17:01

我將如何使iframe「可配置」？ – Andrew 2009-12-15 00:02:51

用一些服務器端編碼。例如，您可以讓用戶像http:// http://example.com/iframe.php?colour1=000000&colour2=ff0000&colour3=ffcc00一樣鏈接IFRAME，以便他們選擇自己的顏色。 – ceejayoz 2009-12-15 14:35:19

Ceejayoz &喬已經涵蓋了2分基本的選項，Javascript或IFrame。

如果你想看看一些例子，看看StackOverflow flair feature，這正是你想要做的，並允許用戶在他們自己的網站上嵌入StackOverflow用戶信息框。

如果你想看看它是如何實現的，檢查出html，用戶將鏈接到與一個IFrame，或本Javascript，這對用戶會從他們的頁面調用。（見註釋下「我怎麼使用它的」 SO flair頁。）

[你需要插入這些鏈接你的用戶數，看看相關的HTML/JS文件自己。]

在SO的情況下，js/html是專門爲每個用戶生成的。爲了完整，我已經包含了實現這個的StackOverflow js/html。

JavaScript：你可以看到，當執行這個基本上寫入一個腳本元素到users html頁面，注入一個鏈接到SO css文件到頭部。然後，它只包含一些相當簡單的div/span標籤，通過css進行樣式設計。顯然，用戶可以在這種情況下提供自己的CSS，而不是以不同的方式進行設計。

document.write(' 
<script> 
    var link = document.createElement(\"link\"); 
    link.href = \"https://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=\"https://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=\"https://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：你可以看到這是一個完整的HTML文檔（XHTML實際上是迂腐），它包括一切需要包括對人身體的頭部鏈接到CSS和內容。

<!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="https://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="https://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>

來源

2009-12-14 23:14:52

有些可配置的IFRAME解決方案的很好的例子。 – ceejayoz 2009-12-14 23:17:35

感謝鏈接到「天賦功能」。你是對的，這是我想要做的一個很好的例子。 =] – Andrew 2009-12-14 23:19:04

如何爲他人提供代碼以將您的內容嵌入到他們的html頁面中？

回答

相關問題