我正在使用嵌入iframe中其他域的其他网页的网页。此页面的内容完全符合iframe,因此没有溢出的内容,也没有滚动条。但是,可以使用鼠标滚轮缩放内容。
但在Safari和Chrome中,使用鼠标滚轮进行缩放也会滚动整个页面。我不希望这种滚动发生 - 只是缩放iframe。当鼠标悬停在iframe上时,如何停止滚动?
我试图在JSFiddle的最小例子中重新创建问题:https://jsfiddle.net/twodee/57a68k3h。当我缩放绿色iframe时,文本会缩放,但页面也会滚动。
frame = document.getElementById('myframe');
frame_child = document.createElement('div');
var font_size = 12;
frame_child.addEventListener('wheel', function(e) {
font_size += e.wheelDelta;
frame_child.style.fontSize = font_size + 'px';
});
frame_child.style.width = '190px';
frame_child.style.height = '190px';
frame_child.innerHTML = 'this text should zoom';
frame.contentWindow.document.body.appendChild(frame_child);

#myframe {
background-color: #00FF00;
}

<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
<div>
<iframe id="myframe" height="200px" width="800px" src="about:blank"></iframe>
</div>
<ul>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
</ul>
&#13;
编辑: 上面的例子有点误导,因为iframe源并不是由我自己的脚本动态生成的。相反,源是由一个单独的网站生成的,该网站需要来自请求者的表单输入。这是一个更好地展示我的问题的CodePen:http://codepen.io/twodee/pen/PGqgyw。 (JSFiddle仅允许https:// sources。)
当我转动iframe时,3D立方体会缩放并且页面会滚动。
编辑: 我在谷歌地图嵌入页面后看到的效果就是我所看到的效果。或Sketchfab。当我将这些内容嵌入到iframe中时,我不必在页面中做任何特殊的事情来进行嵌入,以便在不滚动的情况下进行缩放。嵌入式内容本身似乎有一些禁用滚动的东西,但我不知道是什么。
答案 0 :(得分:3)
您可以在Iframe上添加鼠标事件侦听器,以检查鼠标是否在其中,如果是,则停止滚动发生在窗口上:
frame = document.getElementById('myframe');
frame_child = document.createElement('div');
var font_size = 12;
var inFrame=false;
frame_child.addEventListener('wheel', function(e) {
font_size += e.wheelDelta;
frame_child.style.fontSize = font_size + 'px';
});
frame.addEventListener("mouseover",function(e){
inFrame=true;
});
frame.addEventListener("mouseout",function(e){
inFrame=false;
});
window.addEventListener('wheel',function(e){
if(inFrame)
e.preventDefault();
})
frame_child.style.width = '190px';
frame_child.style.height = '190px';
frame_child.innerHTML = 'this text should zoom';
frame.contentWindow.document.body.appendChild(frame_child);
击> <击> 撞击>
只需在div轮子监听器上添加防止默认值:
frame_child.addEventListener('wheel', function(e) {
e.preventDefault();
font_size += e.wheelDelta;
frame_child.style.fontSize = font_size + 'px';
});
答案 1 :(得分:2)
在鼠标:hover
$("#myframe").hover(
function() {
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}, function() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
);
$( "#myframe.fade" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
答案 2 :(得分:2)
正如其他人所说,preventDefault()适用于你的第一个例子,它是一个div。
但是,对于外部网站的iframe,这似乎不可能,因为在iframe上只捕获了某些事件。 在此codepen上,您可以看到在iframe上捕获了mouseenter事件,但是没有点击和方向盘。 密切关注console.log(目标)语句,哪些不起作用,哪些不起作用。
<iframe id="myframe" src="http://www.w3schools.com">
</iframe>
<br>
<div id="div1">
test
</div>
<div id="div2">
</div>
CSS
iframe {
width:600px;
height:200px;
border: 10px solid red;
}
div {
width:600px;
height:40px;
border: 10px solid blue;
}
#div2 {
width:600px;
height:800px;
border: 10px solid green;
}
JS
frame = document.getElementById('myframe');
div = document.getElementById('div1');
frame.addEventListener('mouseenter', function(e) {
console.log('entered');
var target = e.target;
console.log(target);
});
frame.addEventListener('click', function(e) {
console.log('clicked');
var target = e.target;
console.log(target);
});
frame.addEventListener('wheel', function(e) {
console.log('wheel');
var target = e.target;
console.log(target);
});
font_size = 12;
div1.addEventListener('wheel', function(e) {
var target = e.target;
console.log(target);
font_size += -e.wheelDelta/100;
this.style.fontSize = font_size + 'px';
if(target.id === 'div1')
e.preventDefault();
});
<强>更新强> 由于您说您可以控制iframe内容,因此可以将wheel事件处理程序添加到框架内容中。试试这个......
框架内容上的HTML
<div id="framedDiv">
abc<br>
def<br>
ghi<br>
jkl<br>
mno<br>
pqr<br>
stu<br>
vwx<br>
abc<br>
def<br>
ghi<br>
jkl<br>
mno<br>
pqr<br>
stu<br>
vwx<br>
abc<br>
def<br>
ghi<br>
jkl<br>
mno<br>
pqr<br>
stu<br>
vwx<br>
</div>
关于框架内容的JS
framed = document.getElementById('framedDiv');
font_size = 12;
framed.addEventListener('wheel', function(e) {
var target = e.target.id;
console.log(target);
font_size += -e.wheelDelta/100;
this.style.fontSize = font_size + 'px';
e.preventDefault();
});
答案 3 :(得分:1)
为窗口添加一个监听器(iframe的父级)并尝试:
window.addEventListener("wheel", function () {
if ($("#myframe").is(":hover")) {
// call iframe zoom function here
return false;
}
});
当鼠标悬停在iframe上时,在窗口滚动上返回false但执行缩放。