Question

我们正忙于一个需要从USB设备捕获签名的Web项目。让它工作非常简单，但你需要添加一个浏览器。

但是，一旦将页面放入iFrame（All在同一个域中），它就会停止工作。没有错误或警告，单击按钮时什么都不做。看起来document.dispatchEvent函数不起作用......我想......我可以在Chrome开发工具中看到自定义事件监听器。

问题是，我添加了一个用于点击的事件监听器，它可以在iframe内的页面上运行。似乎调度自定义事件无效。

现在，我离这里的专家很远，经过几个小时的谷歌搜索并尝试了各种不同的方法，但是我的时间已经不多了，需要帮助。

iframe中的自定义事件是否存在某种限制？安全问题？

我使用制作签名板的公司的示例页面创建了一个JSFiddle。（参见下面如何安装浏览器插件）。如果你自己运行这个例子，当你点击Sign按钮时，你会看到一个弹出窗口。您实际上不需要设备来打开弹出窗口。当示例页面在iframe中时，它什么都不做。

我们需要这个在Linux和Windows上运行，但我在使用谷歌浏览器的两个平台上都有完全相同的问题。

<iframe style="width: 100%; height: 500px;" src="https://www.esignemcee.net/SigCaptureWeb/sign_chrome_ff_sigcapturewebsdk.html"></iframe>

JSFiddle

Chrome add-on install guid

EPad Signature example page

Answer 1

在我的代码中添加top似乎可以解决问题。如果您在iframe中加载页面并需要添加事件侦听器并在“子”页面中调度这些事件，请在代码中添加top，如：

$(document).ready(function (){
top.document.addEventListener("MyCustom", _CustomHandler, true);

setTimeout(function ()
{
    var MyDetail =
    {
        message: "blablabla"
    };
    var event = new CustomEvent('MyCustom', { detail: MyDetail });
    top.document.dispatchEvent(event);
}, 1000);});

function _CustomHandler(EventData){
alert(EventData.detail.message);}

这似乎只是在尝试使用chrome中的扩展时遇到的问题。正常事件似乎工作正常。因此，我在上面添加的代码将以任何一种方式工作，但这只是为了准确显示'top'关键字的使用方式。

希望将此留在此处可以防止其他人花费4天时间试图弄清楚为什么派遣某些事件在iframe中工作，而有些则在使用chrome时没有。 Chrome似乎处理针对扩展程序发送的事件略有不同。我无法找到任何关于此的文档，但是我知道自定义事件以及使用javascript这样的扩展程序。也许更有知识的人可以添加更多信息。

Javascript自定义事件和iFrame

1 个答案: