Question

我开发了一个可以放入任何网站的小组件。现在，我想开发一个代码，可以演示我的组件在任何网站上的外观。

所以，这个人会来我的页面并输入他的URL然后我的代码应该将我的自定义JS / CSS嵌入到下载的HTML中并显示它。 Something like this

在这里，与反馈标签一样，我想在该页面的任何位置显示我的组件。

Answer 1

创建一段javascript，将您的代码添加到页面中，如下所示：

javascript:(function(){var%20script=document.createElement('script');script.src='http://www.example.org/js/example.js';document.getElementsByTagName('head')[0].appendChild(script);})()

将其添加为类似链接的 href ：

<a href="javascript:(function(){var%20script=document.createElement('script');script.src='http://www.example.org/js/example.js';document.getElementsByTagName('head')[0].appendChild(script);})()">Link Text Here</a>

告诉您的用户将链接拖到他们的书签工具栏，然后在不同的网站上点击它以试用您的代码。

一些例子：http://www.reclaimprivacy.org/，http://www.readability.com/bookmarklets

Answer 2

在您链接的示例中，他们正在请求服务器上url querystring参数中指定的页面，然后执行或多或少的以下步骤：

在<head>标记中，他们在文档中添加了<base href="url" />标记。 base标记会使文档中的任何相对链接将href属性中的值视为其根。这就是他们如何绕过破碎的CSS /图像。（所有浏览器都支持base标记）
在文档的末尾（IE </body>标签），他们正在注入运行他们演示的javascript。
他们提供浏览器请求的修改后的HTML。

所有这些在实施中都非常简单。您可以使用正则表达式分别匹配步骤1和2的<head>和</body>标记。根据服务器平台的不同，您实际请求页面的方式会有所不同，但这里有一些链接可以帮助您入门：

C＃ - HttpWebRequest object documentation
PHP - HttpRequest::send

Answer 3

Nathan的回答与我们完成demo feature at WebEngage的方式最接近。要使这样的演示功能，您需要创建一个可嵌入第三方站点的Javascript小部件。 syserr0r关于创建bookmarklet的答案是最简单的方法。我们的是JAVA后端，我们使用HttpClient来获取响应。正如Nathan建议的那样，我们解析响应，清理它并将我们的小部件Javascript添加到响应中。小部件JS代码从那里获取它以呈现反馈选项卡并加载演示简短调查。

披露：我是WebEngage的联合创始人兼首席执行官。

Answer 4

由于跨站点脚本限制，您无法使用JQuery执行此操作。

我建议你编写一个PHP脚本，下载用户指定的URL并包含你的widget代码，然后将其回送给用户。

Answer 5

我建议使用bookmarklet。我已经创建了一个bookmarklet生成器，用于向页面添加支持jQuery的书签，以便于开发。

页面上有一个卡尺书签，你可以乱用它来展示它的工作示例。

完全披露，这是我已经做过的事情，我不是想要垃圾，因为我认为这是相关的：zbooks

Answer 6

你可以创建一个iframe页面，它在iframe中加载他们的页面，并使用javascript将你的代码注入iframe。

Answer 7

这是我的方法......

http://jsfiddle.net/L2kEf/

<强> HTML

<iframe src="http://www.bing.com"></iframe>
<div>I am div</div>

<强> CSS

div { background: red; position: absolute; top: 20px; width: 100px; left:20px;}
iframe{width: 100%; height: 500px;}

你也可以添加javascript / jquery，所以你可以做类似的事情，

jQuery //不是100％肯定它会适用于跨浏览器，但你知道，值得一试。

$('div').click(function (){
    $('iframe').contents().html('changed');///
});

如果这不能改变任何内容，你可以显示一个对话框，说它通常可以在你的网站上运行，然后使用@ syserr0r方法为书签用户，以获得更好的结果，因为你提供这种服务，对于开发人员，我确定他们会知道书签，我的方法很少使用:)所以希望它有所帮助。

Answer 8

我遇到了类似的问题，主要障碍是跨域政策。

您必须要求用户将您的代码放入<script src="...">或创建代理解决方案，以便为其添加代码。

我去代理，这是我的观察：

在php中创建基本代理很容易 - 在sourceforge上有一些php代理，Ben Alman为AJAX创建了一个简单的php代理。基于那些我能够创建一个PHP代理在一天内正确地改变内容。
之后我花了很多时间让它与越来越多有问题的网站合作。你永远不能创造一个完美的代理。

作为替代方案（只要您是非商业用户），您可以使用http://www.jmarshall.com/tools/cgiproxy/并将网站放在iframe中，然后对iframes文档执行任何操作，就像在您的域中一样感谢到代理。您可以访问iframeDOMnode.contentWindow.document然后等。

Answer 9

您可以创建用户可以下载的Crossrider扩展程序。然后只需将其添加到您的App / Extension代码中：

appAPI.dom.addRemoteJS("http://yourdomain.com/file.js")

然后，您的用户可以下载扩展程序（它适用于Internet Explorer，Chrome和Firefox的跨浏览器），并且会在每次加载页面时加载您的JS代码。

Answer 10

您可以使用iframe获得近似值。看一下这个链接的例子。

http://jsfiddle.net/jzaun/5PjRy/

此appoch的问题在于，当页面滚动时，您无法移动DIV，它们实际上只是浮动在iframe上。没有办法解决这个问题，因为跨域脚本不会让您访问iframe的文档来监控滚动事件。

对于更合适的示例，您唯一的另一个选择是从服务器端以您正在使用的任何脚本语言加载页面并将其加载到iframe（或转换为div等）并且您可以使用所有你想要的javascript，因为页面来自你的域名。

对于你的小部件看起来像什么的例子我想象将你的DIV浮动到iframe上会给出足够的想法。

请注意，您提供的示例是使用服务器端方法，而不是iframe方法。

Answer 11

我同意bookmarklet策略。

我是http://bookmarklets.heroku.com/的粉丝，可以让你轻松生成bookmarklet，注入jQuery等。

在任何网站上展示我的CSS演示

11 个答案: