Question

我有一个使用小部件拖放模型的SPA，用户可以通过将小部件拖到设计图面上来设计自己的仪表板。窗口小部件是带有嵌入式javascript的HTML页面，它们通过标签添加到父DOM中。

我有一个特定的用例，即使鼠标位于其中一个窗口小部件对象上，父页面也需要知道页面上的鼠标位置。然而，由于DOM事件在窗口小部件对象DOM和父DOM之间被隔离，我认为没有办法轻易地将鼠标事件冒泡到父DOM中（例如，指针事件将无法工作），并且已经开始编写小部件和父页面之间的简单事件通知系统。

在我构建自己的事件管道之前，我想与stackoverflow社区一起检查，没有偷偷摸摸的方法让父级接收来自内置HTML / CSS /的widget对象冒出的鼠标事件JavaScript函数？

（我会设置一个小提示来显示这个，但我不认为可以使用单独的HTML页面模拟嵌入对象）

    // Create widgets
    function loadWidget(myFrag, widgetNum) {
        var widgetObj = document.createElement("object");
        widgetObj.type = "text/html";
        widgetObj.data = "widgets/" + widgets[widgetNum].type + "." + widgets[widgetNum].ext + parent.debugURL                                  // location of widget
        widgetObj.className = "widget";
        widgetObj.id = "widgetObj" + widgetNum;
        widgetObj.addEventListener("load", widgetLoaded, false);
        myFrag.appendChild(widgetObj);                                                                                                          // build widgets onto fragment
    }

Answer 1

对于跨源框架，无法使框架和主文档中的手势事件都出现泡沫无法按postMessage克隆MouseEvents，但您可以自己创建一个简单对象，只需要事件中需要的道具。

parent.postMessage({
  type: event.type,
  clientX: event.clientX,
  clientY: event.clientY,
  target_id: event.target.id // (elements can't be cloned for postMessage)
}, '*')

另一种选择是向父节点发送消息，以便它激活覆盖元素以仅在某些时刻捕获鼠标事件，但是你会丢失帧中的事件。

但是，由于您的框架文档看起来与主文档的来源相同，因此您只需从主文档中添加一个监听器：

// obj is your <object> element
// wait for it to load
  // (may require an obj.data = obj.data for some UA when the page has been cached)
obj.onload = e => { 
  const doc = obj.contentDocument; // get access to the framed Document
  const target = doc.querySelector(selector); // get access to the target
  target.addEventListener(eventType, eventHandler); // yes that's all
  // now eventHandler will be executed from the main doc, with the event from the framed one
 };

将DOM鼠标事件从子<object>传递到父页面的选项

1 个答案:

Live demo