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

大多数可以嵌入网站的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>

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

它们的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>    

（职能（d）{
var f=d.getElementsByTagName（'SCRIPT'）[0]，p=d.createElement（'SCRIPT'）；
window.WidgetId=“1234”；
p、 类型='text/javascript'；
p、 setAttribute（'charset'，'utf-8'）；
p、 异步=真；
p、 src=“//www.example.com/assets/clientwidget/chatwidget.nocache.js”；
f、 parentNode.insertBefore（p，f）；
}（文件）；

---

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

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

---

构建运行在这种结构上的小部件的过程是什么？如何设置iframe的内容？有这样的模式吗？如何使用GWT实现这一点我不知道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>

然后处理服务器响应（在

回调（）函数中）：


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

要插入第三方网站的代码段：

<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>    

编辑：

如果您希望您的小部件不受来自“外部”的任何css的影响，则必须将其加载到iframe中

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

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

EDIT2:

通过使用上面的代码片段，您可以确保您的小部件不会受到主机页面中任何css的影响。
要从小部件内部获取hostpage url，只需添加以下功能：

// 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);

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

EDIT3:

由于您在两个不同的域上，因此必须使用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>

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

要插入页面的javascript:

gwt类和onmoduleload:
这是我用javascript在cloud9（在线IDE）中编写的一个功能完整的简单小部件expample项目，如果您想编辑它，请随时请求访问，查看是公开的（对于注册用户-注册是免费的）

资料来源：
,
结果:

至于他们如何做到这一点的问题：

zopim似乎在客户端逐步构建其小部件，定义并要求基本模块（如这些
\uuu$$\ uuuuuu meshim\uwidget\ucomponents\uMobileChatWindow\uMainScreen
），由子模块组成，然后使用
\uu$\ ujx\uui\uhtmlelement
builder处理所有内容，该生成器创建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
和
addHtmlement
函数外，它们几乎相同

希望有人会觉得这很有用：）。
1）有许多不同的方法可以将内容加载到iframe。Iframe有独立的内容。若你们放在主机页的框架并没有src，因为浏览器安全策略，你们不能简单地从其他域加载内容。但是您可以从其他域加载js。对于此端口，您需要usw JSONP

2） 要与host page和widget iframe共享cookie，您需要使用如下所示的postMessage api
我不太擅长GWT，这可能会对您有所帮助？不，这对我没有帮助。可能是我以前两次都试过的。问题是，如果在主站点上定义CSS，GWT小部件将使用相同的CSS规则。我希望集成了GWT小部件的站点的CSS不应影响GWT小部件的CSS。加载CSS的方式是什么？只需将其包含在host.html中？因为我对宿主站点上截取的代码没有其他影响，他们可能在标题中有一个css。我将防止主页的css影响我的GWT小部件的css。有什么想法吗？@confile请编辑您的问题并提及所有这些要求。我被
div.innerHTML=count，缺少您添加的注释。JSONP比CORS有一些优势吗？没有人应该支持IE@Gothdo，看看他们的聊天工具。iframe具有
src=“javascript:false”
。这意味着什么？@Gothdo如何使用
p.setAttribute（'crossorigin'，'*'）？让我们来吧。我没弄明白。这是如何属于我的问题和GWT的？@confile我的示例不包括您关于此类小部件的构建过程以及您提供的列表中的一个特定小部件的一些问题吗？不管最终的js脚本是如何构建的，实现通常都是一样的。我看到之前的一个答案也没有发布在GWT中，而且你也没有说你不需要js解决方案，所以我决定带一些基本但完整的a-z示例。
public native static void yourMethod() /*-{
     $wnd.parent.someMethodFromOutsideTheIframe(); 
}-*/;

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

<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");
}-*/;

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()