php - 制作可链接到 4 个不同网站的小部件的最佳方法是什么？

Question

我试图通过避免必须复制和粘贴代码以及必须在多个不同站点上更新代码来减少维护方面的麻烦。我应该使用 iframe 吗？到目前为止，我只是使用内联 CSS 对其进行样式设置，并计划将粘贴复制到其他 3 或 4 个站点。有点像:

<div style="width:165px; height:40px; background: url('http://site1.com/images/DH-sharebar.gif') repeat-x top #333;float:right;margin-top:15px;margin-right:20px;border-radius:5px;border:1px #565656 solid;">
  <a href="http://site1.com/" target="_blank" title="site 1">
    <img src="http://davidhairabedian.com/davidhairabedian/images/DH-sharebar-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;">
  </a>
  <a href="http://site2.org/" target="_blank" title="site 2">
    <img src="http://site1.com/images/DH-sharebar-HPM-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;">
  </a>
  <a href="http://site3.org/" target="_blank" title="site 3">
    <img src="http://site1.com/images/DH-sharbar-EHF.png" style="border-radius:0;margin-top:5px;margin-left:3px;">
  </a>
  <a href="http://site4.org/" target="_blank" title="site 4">
    <img src="http://site1.com/images/DH-sharebar-EHC.png" style="border-radius:0;margin-top:5px;margin-left:10px;">
  </a>
</div>

Answer 1

如果您不介意稍有延迟，您可以编写一个简单的 JavaScript，通过 AJAX 将内容加载到页面中，就像 facebook 或许多其他小部件所做的那样。

抵消您的链接不是页面初始 HTML 的一部分这一事实的好处是，您可以从一个地方更新所有小部件的内容，而您将来不会忘记任何一个。

看看 Facebook/Google +/Twitter/其他人是如何做到这一点的。

编辑

你的问题让我开始思考如何做到这一点，所以我做到了。我做了一个工作 JSFiddle example .

基本上，您将一个空的 div 和一个 script 标记粘贴到您的目标页面中。该脚本引用存储在中央服务器上的文件。它在文档中创建另一个 script 标签，该标签本身包含对第一个脚本中定义的函数的调用，该函数将您的小部件插入页面上指定的 div。

粘贴到您的页面

<div id="placeholder-div"></div>
<script type="text/javascript" src="http://pagesofinterest.net/stack-examples/what-would-be-the-best-way-to-make-a-widget-that-will-link-to-4-different-websit/script.js"></script>

第一个脚本内容

(function loadContent() {
    (function xss_ajax(url) {
            var script_id = null;
            var script = document.createElement('script');
            script.setAttribute('type', 'text/javascript');
            script.setAttribute('src', 'http://pagesofinterest.net/stack-examples/what-would-be-the-best-way-to-make-a-widget-that-will-link-to-4-different-websit/content.php');
            script.setAttribute('id', 'script_id');

            script_id = document.getElementById('script_id');
            if(script_id){
                document.getElementsByTagName('head')[0].removeChild(script_id);
            }

            // Insert <script> into DOM
            document.getElementsByTagName('head')[0].appendChild(script);
    })();
})();

function callback(data) {
    document.getElementById('placeholder-div').innerHTML = data;
}

插入的脚本内容:

<?php ob_start(); ?>
<div style="width:165px; height:40px; background: url('http://site1.com/images/DH-sharebar.gif') repeat-x top #333;float:right;margin-top:15px;margin-right:20px;border-radius:5px;border:1px #565656 solid;">
  <a href="http://site1.com/" target="_blank" title="site 1">
    <img src="http://davidhairabedian.com/davidhairabedian/images/DH-sharebar-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;"/>
  </a>
  <a href="http://site2.org/" target="_blank" title="site 2">
    <img src="http://site1.com/images/DH-sharebar-HPM-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;"/>
  </a>
  <a href="http://site3.org/" target="_blank" title="site 3">
    <img src="http://site1.com/images/DH-sharbar-EHF.png" style="border-radius:0;margin-top:5px;margin-left:3px;"/>
  </a>
  <a href="http://site4.org/" target="_blank" title="site 4">
    <img src="http://site1.com/images/DH-sharebar-EHC.png" style="border-radius:0;margin-top:5px;margin-left:10px;"/>
  </a>
</div>
<?php $content = json_encode(ob_get_clean());

echo "callback($content);";

在这一切之后，我想到您可以只使用 iframe:

<iframe src="http://pagesofinterest.net/stack-examples/what-would-be-the-best-way-to-make-a-widget-that-will-link-to-4-different-websit/iframe.html"></iframe>

就我个人而言，我会使用 JavaScript 方法，因为这允许我随时修改小部件的样式，而无需我的用户更新他们的页面。