I have an iframe embedded in a webpage. This iframe has a some rect elements inside an svg element. The following code is used to bind events to the `rect elements:
JS code:
$(() => {
let bindEvents = () => {
let targets = $('iframe').contents().find('rect');
$.each(targets, (elm, i) => {
$(targets[elm]).on('click', () => {
alert('Hello, World!');
});
});
}
setTimeout(bindEvents, 10000);
});
On chrome 64 these events are getting deleted when developer console is opened. On chrome 65, these events won't get binded if developer console is not opened.These issue is happening in chrome on ubuntu. Chrome 58 and 61 has no issues in binding evnets.
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>
The url or the iframe is from metabase. I'm not able to post the full url here since it is confidential.
