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参数中指定的页面,然后执行或多或少的以下步骤:
<head>标签中,他们正在<base href="url" />为文档添加标签.该base标签将文档中的任何相对链接的治疗价值href属性作为他们的根.这就是他们如何绕过破碎的CSS /图像.(base所有浏览器都支持该标记)</body>标签),他们正在注入运行他们演示的javascript.所有这些在实施中都非常直接.您可以使用正则表达式分别匹配步骤1和2 的<head>和</body>标记.根据服务器平台的不同,您实际请求页面的方式会有所不同,但这里有一些链接可以帮助您入门:
HttpWebRequest对象文档Nathan的答案与我们在WebEngage上完成演示功能的方式最接近.要使这样的演示功能,您需要创建一个可嵌入第三方站点的Javascript小部件.syserr0r关于创建bookmarklet的答案是最简单的方法.我们的是JAVA后端,我们使用HttpClient来获取响应.正如Nathan建议的那样,我们解析响应,清理它并将我们的小部件Javascript添加到响应中.小部件JS代码从那里获取它以呈现反馈选项卡并加载演示简短调查.
披露:我是WebEngage的联合创始人兼首席执行官.