在不受主机页面 CSS 影响的跨域主机页面中创建嵌入式 JavaScript？

Question

大多数可以嵌入网站的 javascript 小部件都使用以下结构。首先，您嵌入这样的代码：

<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){
z._.push(c)},
$=z.s=d.createElement(s),
e=d.getElementsByTagName(s)[0];
z.set=function(o){
    z.set._.push(o)
};
z._=[];
z.set._=[];
$.async=!0;
$.setAttribute('charset','utf-8');
$.src='//v2.zopim.com/?2342323423434234234';
z.t=+new Date;
$.type='text/javascript';
e.parentNode.insertBefore($,e)})(document,'script');
</script>

然后，当加载你的页面时，这个脚本会创建一个像这样的 html 结构：

<div class="widget-class">
  <iframe src="about:blank">
    // the content of the widget
  </iframe>
</div

我在许多聊天服务中看到了相同的结构，例如：

https://en.zopim.com/ 
http://banckle.com/
https://www.livechatinc.com/

所有人的共同点是他们的 iframe 没有src，即附加的 URL。

更新：这是我用来将小部件代码加载到第三方网站的脚本：

<script type="text/javascript">
(function(d){
    var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
    window.WidgetId = "1234";   
    p.type = 'text/javascript';
    p.setAttribute('charset','utf-8');
    p.async = true;     
    p.src = "//www.example.com/assets/clientwidget/chatwidget.nocache.js";     
    f.parentNode.insertBefore(p, f);
}(document));
</script>    

我希望集成 GWT 小部件的网站的 CSS 不应影响 GWT 小部件的 CSS。我将防止主机页面的 CSS 影响我的 GWT 小部件的 CSS。

注意：我也想从我的 GWT 小部件访问托管网站。
主机页面的域是 www.example.com，而 iframe 的域是 www.widget.com。我还想从 iframe 设置主机域的 cookie。

构建在这种结构上运行的小部件的过程是什么？ iframe 的内容是如何设置的？有这样的模式吗？我怎么能用 GWT 做到这一点

Answer 1

1) 将内容加载到 iframe 有许多不同的方法。 iframe 有独立的内容。您放入主机页面的 iframe 没有 src，由于浏览器安全策略，您不能简单地从其他域加载内容。但是你可以从其他域加载js。对于这个porpuse你需要usw JSONP

2) 要与主机页面和小部件 iframe 共享 cookie，您需要使用 postMessage api，如 post

Answer 2

编辑：
如果您希望您的小部件不受“外部”任何 css 的影响，您必须加载到 iframe 中。

添加到您的网站以加载任何 gwt 项目/小部件的代码：

<iframe id="1234" src="//www.example.com/assets/Chatwidget.html" style="border: 1px solid black;" tabindex="-1"></iframe>

注意： 我没有加载 nocache.js 而是加载 yourwidget.html 文件。 像这样，框架内的所有类都不会受到外部任何类的影响。

要访问此 iframe 之外的任何内容，您可以使用 jsni methods。这仅在您的 iframe 和第三方站点的域相同时才有效。否则你必须使用window.postMessage:

public native static void yourMethod() /*-{
     $wnd.parent.someMethodFromOutsideTheIframe(); 
}-*/;

EDIT2：

通过使用上面的 sn-p，您可以确保您的小部件不受主机页面中任何 css 的影响。 要从小部件内部获取主机页面 url，只需添加以下函数：

private native static String getHostPageUrl() /*-{
    return $wnd.parent.location.hostname;
}-*/;

EDIT3：

由于您位于 2 个不同的域中，因此您必须使用 window.postMessage。 这里有一个小例子来帮助你：

除了 iframe，您还必须向 example.com 的窗口添加一个事件侦听器，用于侦听来自 iframe 的消息。您还可以检查消息是否来自正确的来源。

<script>
    // Create IE + others compatible event handler
    var eventMethod = window.addEventListener ? "addEventListener"
            : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage"
            : "message";

    // Listen to message from child window
    eventer(messageEvent, function(e) {
        //check for the correct origin, if wanted
        //if ( e.origin !== "http://www.widget.com" )
        //        return
        console.log('parent received message!:  ', e.data);
        //here you can set your cookie
        document.cookie = 'cookie=widget; expires=Fri, 1 Feb 2016 18:00:00 UTC; path=/'
    }, false);
</script>

您可以在小部件内部调用此方法：

public native static void postMessageToParent(String message) /*-{
    //message to sent, the host that is supposed to receive it
    $wnd.parent.postMessage(message, "http://www.example.com");
}-*/;

我在 pastebin 上放了一个工作示例：

要插入页面的javascript：http://pastebin.com/Y0iDTntw
带 onmoduleload 的 gwt 类：http://pastebin.com/QjDRuPmg

Answer 3

这是我用javascript在cloud9（在线IDE）中编写的一个功能齐全的简单小部件示例项目，如果您想编辑它，请随时请求访问，查看是公开的（注册用户-注册是免费的）。

来源： https://ide.c9.io/nmlc/widget-example, 结果： https://widget-example-nmlc.c9users.io/index.html

关于他们如何做到的问题：

似乎 zopim 逐渐在客户端构建他们的小部件，定义和需要基本模块（如这些 __$$__meshim_widget_components_mobileChatWindow_MainScreen），这些模块由子模块组成，然后使用 __$$__jx_ui_HTMLElement 构建器处理所有内容，该构建器创建 HTML 元素并附加它们提供父节点。所有这些都编译为聊天框的结果 HTML。顺便说一句，从某些组件的名称来看，他们似乎使用一些“meshim”库构建小部件，但我从未听说过这个库。

this.dom.src='about:blank'
this.appendToParent(!0)
var H=this.iwin=this.dom.contentWindow
var I=this.idoc=r.extend(H.document)
I.write(G)
I.close()

我猜，这就是 zopim 服务为其小部件创建 iframe 的地方。我不确定他们为什么使用 document.write 而不是 appendChild（document.write 删除事件绑定），但我已经实现了这两个版本 - 除了 setIframeContents 和 addHtmlElement 函数之外，它们几乎相同。

希望有人会觉得这很有用:)。

Answer 4

我不知道 GWT，但你可以用纯 JavaScript 轻松实现。

假设您正在创建一个在线计数小部件。首先，创建一个 iframe：

<script id="your-widget">
  // Select the script tag used to load the widget.
  var scriptElement = document.querySelector("your-widget");
  // Create an iframe.
  var iframe = document.createElement("iframe");
  // Insert iframe before script's next sibling, i.e. after the script.
  scriptElement.parentNode.insertBefore(iframe, scriptElement.nextSibling);
  // rest of the code
</script>

然后使用 JSONP 获取在线计数（参见What is JSONP all about?），例如：

// The URL of your API, without JSONP callback parameter.
var url = "your-api-url";
// Callback function used for JSONP.
// Executed as soon as server response is received.
function callback(count) {
  // rest of code
}
// Create a script.
var script = document.createElement("script");
// Set script's src attribute to API URL + JSONP callback parameter.
// It makes browser send HTTP request to the API.
script.src = url + "?callback=callback";

然后处理服务器响应（在callback() 函数内）：

// Create a div element
var div = document.createElement("div");
// Insert online count to this element.
// I assume that server response is plain-text number, for example 5.
div.innerHTML = count;
// Append div to iframe's body.
iframe.contentWindow.document.body.appendChild(div);

---

就是这样。您的整个代码可能如下所示：

要插入第三方网站的片段：

<script type="text/javascript">
(function(d){
    var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
    window.WidgetId = "1234";   
    p.type = 'text/javascript';
    p.setAttribute('charset','utf-8');
    p.async = true;
    p.id = "your-widget";
    p.src = "//www.example.com/assets/clientwidget/chatwidget.nocache.js";     
    f.parentNode.insertBefore(p, f);
}(document));
</script>    

服务器上的 JavaScript 文件：

// Select the script tag used to load the widget.
var scriptElement = document.querySelector("#your-widget");
// Create an iframe.
var iframe = document.createElement("iframe");
// Insert iframe before script's next sibling, i.e. after the script.
scriptElement.parentNode.insertBefore(iframe, scriptElement.nextSibling);

// The URL of your API, without JSONP callback parameter.
var url = "your-api-url";
// Callback function used for JSONP.
// Executed as soon as server response is received.
function callback(count) {
  // Create a div element
  var div = document.createElement("div");
  // Insert online count to this element.
  // I assume that server response is plain-text number, for example 5.
  div.innerHTML = count;
  // Append div to iframe's body.
  iframe.contentWindow.document.body.appendChild(div);
}
// Create a script.
var script = document.createElement("script");
// Set script's src attribute to API URL + JSONP callback parameter.
// It makes browser send HTTP request to the API.
script.src = url + "?callback=callback";