Question

也许这个问题的答案不像我制作的那样复杂......

我有一个Zend Framework PHP Web应用程序。我将创建一个简单的API，为用户的帐户输出报告。内容将如此简单：

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

我想提供一个代码段，用户可以使用该代码片段将报告嵌入到自己的网站上。

我认为这可以通过iFrame完成，但我以前从未这样做过，所以我不知道最好的方法。

更新：如果可能，我还希望为用户提供设置内容样式的功能。这可能与iFrame有关吗？我希望嵌入的内容看起来尽可能与页面的其余部分一样。

Answer 1

最简单的方法：

使用以下命令创建.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小部件的网站通过允许用户在设置页面上选择颜色，背景图像等来解决这个问题。

Answer 2

Ceejayoz＆amp; Joe已经涵盖了2个基本选项，Javascript或IFrame。

如果您想查看一些示例，请查看StackOverflow flair feature，它正是您要执行的操作，并允许用户在自己的网站上嵌入StackOverflow用户信息框。

如果您想查看其实施方式，请查看用户将使用IFrame链接到的html，或用户可从其页面调用的此Javascript。（请参阅SO flair页面上的“我如何使用它”下的注释。）

[您需要在这些链接中插入您的用户号码，以便亲自查看相关的html / js文件。]

在SO的情况下，js / html是专门为每个用户生成的。为了完整性，我已经包含了实现此目的的StackOverflow js / html。

JavaScript：您可以看到执行时这基本上将脚本元素写入用户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>

Answer 3

iFrame效果最佳。 ajax调用可以正常工作，但您必须执行Google所做的操作，并让它们包含来自您网站的src脚本。 iFrames基本上是将页面加载到内容区域的div标签。它们像所有其他块级元素一样获取所有CSS参数，保存内部内容，如字体，颜色等。

如何为其他人提供代码以将您的内容嵌入到他们的HTML页面中？

3 个答案: