也许这个问题的答案没有我想的那么复杂......
我有一个 Zend Framework PHP Web 应用程序。我将创建一个简单的 API，它将为用户帐户输出报告。内容就这么简单：
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
我想提供一个代码 sn-p，用户可以使用它在自己的网站上嵌入报告。
我认为这可以通过 iFrame 完成，但我以前从未这样做过，所以我不知道最好的方法。
更新：如果可能，我还想为用户提供设置内容样式的功能。使用 iFrame 可以吗？我希望嵌入的内容看起来尽可能像页面的其余部分。
【问题讨论】：
标签： php html api zend-framework embed
最简单的：
创建一个 .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 样式，但一些提供 IFRAME 小部件的网站通过允许用户在设置页面上选择颜色、背景图像等来解决这个问题。
【讨论】：
Ceejayoz 和 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&d=identicon&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\">♦</span>
</span>
<br />
<span class=\"reputation-score\" title=\"reputation score\">16,907</span>
<br />
<span title=\"5 gold badges\"><span class=\"badge1\">●</span>
<span class=\"badgecount\">5</span></span><span title=\"55 silver badges\">
<span class=\"badge2\">●</span><span class=\"badgecount\">55</span></span>
<span title=\"72 bronze badges\"><span class=\"badge3\">●</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&d=identicon&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">♦</span></span>
<br />
<span class="reputation-score" title="reputation score">16,907</span>
<br />
<span title="5 gold badges"><span class="badge1">●</span><span class="badgecount">5</span></span><span title="55 silver badges"><span class="badge2">●</span><span class="badgecount">55</span></span><span title="72 bronze badges"><span class="badge3">●</span><span class="badgecount">72</span></span>
</div>
</div>
</body>
</html>
【讨论】：
iFrame 效果最好。 ajax 调用会起作用，但您必须做 Google 所做的事情，并让它们也包含来自您网站的 src 脚本。 iFrame 基本上是将页面加载到内容区域的 div 标签。除了字体、颜色等内部内容之外，它们像任何其他块级元素一样采用所有 CSS 参数。
【讨论】：