javascript - 如何创建一个可以与嵌入代码一起使用的按钮？

Question

我正在开发一个需要创建可嵌入按钮的项目。我只是想给客户一些代码，并要求他们把它放在他们希望按钮出现在他们网站上的地方。最好的方法是什么？作为示例，请参见下图：

如果有人可以提供一些示例代码，我将非常感激。

Answer 1

最简单的形式是提供超链接：

<a href="http://mysite.com/dosomething" title="DoSomething">Do Something</a>

或者您可以使用图像按钮：

<a href="http://mysite.com/dosomething" title="DoSomething">
    <img src="http://mysite.com/images/a.jpg" alt="DoSomething" />
</a>

这些都消除了对 CSS 和 JS 的依赖。

或者您可以按照问题中的建议进行操作：

<script src="http://mysite.com/scripts/embedbutton.js">
    document.write('<link rel="stylesheet" href="http://mysite.com/css/embedbutton.css" />');
    document.write('<div id="mybutton" onclick="DoSomething(event);">DoSomething</div>');

    function DoSomething()
    {
        /* action code here */
    }
</script>

Answer 2

我认为 javascript 解决方案是您需要的解决方案。创建一个 javascript 来编写按钮的 HTML。例如，将代码放在 public/js/mybutton.js 中。

var link = 'http://yoursite.com';
var text = '<div><a href="' + link + '"><img src="' 
    + link 
    + '/public/images/image.png" alt="Some alt text for the image" /></a></div>';
document.write(text);

然后在您的页面中提供一个脚本标签，供用户嵌入您的按钮。

<script src="http://yoursite.com/public/js/mybutton.js"></script>

结果将是一个带有指向您网站的链接的图像，在脚本之后立即呈现。您也可以使用内联样式。我相信当您想要阻止您的按钮样式修改时，这是一个不错的选择。

Answer 3

您可以使用一个简单的链接：

<a href="http://yoursite.com">Blah</a>

然后要求您的客户将此代码嵌入到他们的网站中。显然，根据您需要在客户端站点和您的站点之间交换的信息，可能会有其他参数、javascript 代码、...