Chrome中<object>标签无法传递拖拽事件至嵌入网页的解决方案咨询

问题背景 #

在Chrome浏览器中，使用<object>标签嵌入网页时，dragover、dragenter、dragleave、drop这类拖拽事件无法传递到嵌入的页面中，但dragstart、click、drag、dragend等事件可正常触发；该问题在Firefox中不存在。

可行解决方案 #

方案1：替换<object>为<iframe> #

<iframe>在Chrome中对跨文档的拖拽事件传递支持更完善，直接替换标签即可解决问题。

修改test.html中的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no"/>
  </head>
  <body>
    <div><iframe src="aaa/google.html" width="900" height="700" frameborder="0"></iframe></div>
  </body>
</html>

替换后，嵌入页面的拖拽事件会正常触发，表现与Firefox一致。

方案2：父页面拦截事件并手动转发（保留<object>时使用） #

如果因需求限制必须使用<object>，可在父页面拦截拖拽事件，手动转发到嵌入页面的目标元素。

修改test.html，添加事件转发逻辑：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no"/>
  </head>
  <body>
    <div><object id="embeddedObj" data="aaa/google.html" width="900" height="700" type="text/html"/></div>
    <script>
      const obj = document.getElementById('embeddedObj');
      // 等待嵌入页面加载完成
      obj.addEventListener('load', function() {
        const embeddedDoc = obj.contentDocument;
        const targetTextarea = embeddedDoc.getElementById('txtarea');

        // 拦截并转发指定拖拽事件
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventType => {
          obj.addEventListener(eventType, function(e) {
            // 阻止父页面的默认拖拽行为
            e.preventDefault();
            // 创建与原事件参数对齐的新事件
            const forwardedEvent = new MouseEvent(eventType, {
              bubbles: true,
              cancelable: true,
              clientX: e.clientX,
              clientY: e.clientY,
              screenX: e.screenX,
              screenY: e.screenY
            });
            // 将事件分发到嵌入页面的目标元素
            targetTextarea.dispatchEvent(forwardedEvent);
          });
        });
      });
    </script>
  </body>
</html>

同时确保嵌入页面google.html的drop事件中保留return false或调用e.preventDefault()，避免默认的图片地址填充行为。

方案对比 #

• 方案1：实现简单，兼容性强，是优先推荐的解决方案。
• 方案2：适合无法替换<object>的场景，但需要处理事件坐标、冒泡等细节，存在一定的边缘情况适配成本。

内容的提问来源于stack exchange，提问作者Sigmund Freud