Question

我在网页中嵌入了iframe。此iframe在rect元素中包含一些svg个元素。以下代码用于将事件绑定到`rect elements：

JS代码：

$(() => {
  let bindEvents = () => {
    let targets = $('iframe').contents().find('rect');
      $.each(targets, (elm, i) => {
        $(targets[elm]).on('click', () => {
            alert('Hello, World!');
        });
      });
  }
  setTimeout(bindEvents, 10000);
});

在chrome 64上，打开开发人员控制台时会删除这些事件。在chrome 65上，如果没有打开开发者控制台，这些事件将不会被绑定。这个问题发生在ubuntu上的chrome中。 Chrome 58和61在绑定evnet方面没有任何问题。

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Metabase Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css"         />
    <script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script>
    <script src="script.js"></script>
</head>
<body>
    <div id="content-root">
        <iframe width="100%" height="500" id="total-sales-test" src="url-from-metabase"></iframe>
    </div>
</body>
</html>

网址或iframe来自元数据库。由于它是保密的，我无法在此发布完整的网址。

谷歌浏览器在打开或关闭开发者控制台后删除javascript事件

0 个答案: