Chrome“object”标签不会将“dragover”事件传播到嵌入网页

问题描述 投票:0回答:1

“dragstart”和“click”等其他事件即使在 Chrome 中也会传播,但“dragover”则不会。 它在 Firefox 中工作得很好,但不幸的是仍然有人使用这个有缺陷的恶意软件感染的浏览器只是因为“它是谷歌”,所以我必须找到一个解决方案。有什么解决办法吗?

更新:不仅是“dragover”不转发到嵌入网页,还有“dragenter”、“dragleave”和“drop”。 但是,“drag”和“dragend”事件都有效,因此可以手动调度其他事件。但在某些情况下这可能并不容易(例如,我还必须牢记“触摸”事件,并且他们使用相同的调度技巧),准备浪费几天时间,“感谢”谷歌,令人难以置信的是多么糟糕过去15年已经变成这样了。首先他们的搜索引擎变成了无用的垃圾,现在他们的浏览器也是如此。

更新2:由于我无法在这里上传.zip文件,这里是一个最小的例子,它在FF中工作正常,但在Chrome中不起作用。

  1. 创建测试.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 data="aaa/google.html " width="900" height="700" type="text/html"/></div>
  </body>
</html>

  1. 创建新文件夹“aaa”并进入它
  2. 在其中创建 google.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"/>
    <title>Google</title>
  </head>
  <body id="body">
    <div id="container">
      <textarea id="txtarea" rows="5" ondragover="console.log('dragover')" ondragenter="console.log('dragenter')" ondragleave="console.log('dragleave')" ondrop="console.log('drop'); return false"></textarea>
      <div id="buttons">
        <img id="google" src="google.jpg" draggable="true"/>
      </div>
    </div>
  </body>
</html>

  1. 在里面创建google.jpg,我用的是这个https://i.sstatic.net/MBg6CRCp.jpg

现在打开 test.html,打开开发者控制台并尝试将图像拖动到文本区域。 应该发生什么以及 Firefox 中会发生什么:您收到所有消息(“dragenter”、“dragover”、“dragleave”、“drop”),然后由于默认 drop 被 return 取消,因此文本区域保持为空。 Chrome 中会发生什么:您没有收到任何消息,并且文本区域填充了图像的地址,这意味着没有任何事件被转发到嵌入的网页!

javascript google-chrome object events
1个回答
0
投票

您可以使用

<iframe>
作为替代吗?

<iframe src="data:text/html;base64,PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgaHR0cC1lcXVpdj0iY29udGVudC10eXBlIiBjb250ZW50PSJ0ZXh0L2h0bWw7IGNoYXJzZXQ9VVRGLTgiLz4KICAgIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MSwgbWluaW11bS1zY2FsZT0xLCB1c2VyLXNjYWxhYmxlPW5vIi8+CiAgICA8c2NyaXB0PgogICAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdET01Db250ZW50TG9hZGVkJywgZSA9PiB7CiAgICAgICAgY29uc3QgdHh0YXJlYSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0eHRhcmVhJyk7CgogICAgICAgIHR4dGFyZWEuYWRkRXZlbnRMaXN0ZW5lcignZHJhZ292ZXInLCBlID0+IHsKICAgICAgICAgIGUudGFyZ2V0LnZhbHVlICs9ICdkcmFnb3ZlciAnOwogICAgICAgIH0pOwogICAgICAgIHR4dGFyZWEuYWRkRXZlbnRMaXN0ZW5lcignZHJhZ2VudGVyJywgZSA9PiB7CiAgICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7CiAgICAgICAgICBlLnRhcmdldC52YWx1ZSArPSAnZHJhZ2VudGVyICc7CiAgICAgICAgfSk7CiAgICAgICAgdHh0YXJlYS5hZGRFdmVudExpc3RlbmVyKCdkcmFnbGVhdmUnLCBlID0+IHsKICAgICAgICAgIGUucHJldmVudERlZmF1bHQoKTsKICAgICAgICAgIGUudGFyZ2V0LnZhbHVlICs9ICdkcmFnbGVhdmUgJzsKICAgICAgICB9KTsKICAgICAgICB0eHRhcmVhLmFkZEV2ZW50TGlzdGVuZXIoJ2Ryb3AnLCBlID0+IHsKICAgICAgICAgIGUucHJldmVudERlZmF1bHQoKTsKICAgICAgICAgIGUudGFyZ2V0LnZhbHVlICs9ICdkcm9wICc7CiAgICAgICAgfSk7CiAgICAgIH0pOwogICAgPC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGltZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHNyYz0iZGF0YTppbWFnZS9zdmcreG1sO2Jhc2U2NCxQRDk0Yld3Z2RtVnljMmx2YmowaU1TNHdJaUJsYm1OdlpHbHVaejBpZFhSbUxUZ2lQejRLUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIWnBaWGRDYjNnOUlqQWdNQ0F4TUNBeE1DSStDaUFnUEdOcGNtTnNaU0JqZUQwaU5TSWdZM2s5SWpVaUlISTlJalVpSUdacGJHdzlJbTl5WVc1blpTSWdMejRLUEM5emRtYysiIGRyYWdnYWJsZT0idHJ1ZSIvPgogICAgPGRpdiBpZD0iY29udGFpbmVyIj4gICAgIAogICAgICA8dGV4dGFyZWEgaWQ9InR4dGFyZWEiIHJvd3M9IjUiPjwvdGV4dGFyZWE+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=" width="400" height="300"></iframe>

这里是我在 iframe 中呈现的 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"/>
    <script>
      document.addEventListener('DOMContentLoaded', e => {
        const txtarea = document.getElementById('txtarea');

        txtarea.addEventListener('dragover', e => {
          e.target.value += 'dragover ';
        });
        txtarea.addEventListener('dragenter', e => {
          e.preventDefault();
          e.target.value += 'dragenter ';
        });
        txtarea.addEventListener('dragleave', e => {
          e.preventDefault();
          e.target.value += 'dragleave ';
        });
        txtarea.addEventListener('drop', e => {
          e.preventDefault();
          e.target.value += 'drop ';
        });
      });
    </script>
  </head>
  <body>
    <img width="50" height="50" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCI+CiAgPGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjUiIGZpbGw9Im9yYW5nZSIgLz4KPC9zdmc+" draggable="true"/>
    <div id="container">     
      <textarea id="txtarea" rows="5"></textarea>
    </div>
  </body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.