如何用svg制作iframe“可调焦” [英] how to make iframe with svg "focusable"
问题描述
我想检测点击一个iframe。建议使用 方法来捕获父窗口上的模糊事件。但是当用户点击iframe中的svg时，它不会占用焦点，并且根窗口不会丢失。
当用户点击其中的任何内容时，是否有强制使用iframe的方法？或以任何其他方式检测点击。
以下是两个示例。唯一的区别是iframe src url：
工作示例： http://plnkr.co/edit/Av6A2dzlfl2K9xYRl1C2
非工作示例： $ b $ p
$ b $ p
$ p
$ b p
$（document）.ready（function（）{
var overiFrame = false;
$（'iframe'）。hover（function ）{
overiFrame = true;
$（window）.focus（）;
}，function（）{
overiFrame = false;
}）;
$（window）.blur（function（）{
if（overiFrame）{
alert（it works！）;
}
}）;
}）;
HTML：
< body>
< h1>检测点击iframe< / h1>
< / body>
我想出的唯一可靠解决方案是创建一个overframe，并在第一次点击时将其删除。
$（'。overframe'）。click（function（）{alert（'iframe点击'）; this.remove（）;}）;
iframe {border：1px solid＃666;}。wrapper {position：relative;}。overframe，iframe {width：400px; height：300px;}。overframe {background：rgba（255,255,255,0.2）;位置：绝对; top：0;左：0; border：1px solid＃333;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< div class =wrapper> < iframe src =http://phet.colorado.edu/sims/html/forces-and-motion-basics/latest/forces-and-motion-basics_en.html>< / iframe> < div class =overframe>< / div>< / div>
I want to detect click on an iframe. The suggested way to do this is to catch blur event on parent window. But when user clicks on svg within an iframe, it doesn't take the focus and the root window does not lose one. Is there a way to force iframe to take focus when user clicks on any content within it? Or detect the click in any other way.
Here are two examples. The only difference is iframe src url:
Working example: http://plnkr.co/edit/Av6A2dzlfl2K9xYRl1C2
Non-working example: http://plnkr.co/edit/BVm0jL69XucbTNQ6ilKC
JS:
$(document).ready(function() {
var overiFrame = false;
$('iframe').hover(function() {
overiFrame = true;
$(window).focus();
}, function() {
overiFrame = false;
});
$(window).blur(function() {
if (overiFrame) {
alert("it works!");
}
});
});
HTML:
<body>
<h1> Detect click on iframe </h1>
<iframe src="http://phet.colorado.edu/sims/html/forces-and-motion-basics/latest/forces-and-motion-basics_en.html"></iframe>
</body>
The only reliable solution I came up with is to create an "overframe" and remove it on first click.
$('.overframe').click(function () {
alert('iframe click');
this.remove();
});
iframe {
border: 1px solid #666;
}
.wrapper {
position: relative;
}
.overframe, iframe {
width: 400px; height: 300px;
}
.overframe {
background: rgba(255,255,255,0.2);
position: absolute;
top: 0; left: 0;
border: 1px solid #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<iframe src="http://phet.colorado.edu/sims/html/forces-and-motion-basics/latest/forces-and-motion-basics_en.html"></iframe>
<div class="overframe"></div>
</div>
这篇关于如何用svg制作iframe“可调焦”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
