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的一部分这一事实的好处是，您可以从一个地方更新所有小部件的内容，而您将来不会忘记一个小部件。< / p>

了解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方法，因为这样我就可以随时修改小部件的样式，而不需要我的用户更新他们的页面。

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

1 个答案: