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

Jay*_*esh 16 html javascript css jquery

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

所以,这个人会来到我的页面并输入他的URL然后我的代码应该将我的自定义JS/CSS嵌入到下载的HTML中并显示它.像这样的东西.

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

sys*_*r0r 15

试试书签.

创建一个javascript,将您的代码添加到页面中,如下所示:

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

将其添加为链接的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>
Run Code Online (Sandbox Code Playgroud)

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

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


Nat*_*son 12

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

  1. <head>标签中,他们正在<base href="url" />为文档添加标签.该base标签将文档中的任何相对链接的治疗价值href属性作为他们的根.这就是他们如何绕过破碎的CSS /图像.(base所有浏览器都支持该标记)
  2. 在文档的末尾(IE </body>标签),他们正在注入运行他们演示的javascript.
  3. 它们提供浏览器请求的修改HTML.

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


avl*_*esh 9

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

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

  • 很高兴看到WebEngage的人在这里做出回应.感谢您的诚实和见解! (2认同)
  • 很高兴是Mine Greg.顺便说一下,我们刚刚在我们的工程博客上做了一个告诉 - http://engineering.webengage.com/2011/11/24/try-a-demo-feature-why-and-how-we-did-it/ (2认同)