停止在可缩放的iframe上滚动

Question

我正在开发一个网页,它嵌入来自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>

编辑:上面的例子有点误导,因为iframe源实际上并不是由我自己的脚本动态生成的.相反,源是由一个单独的网站生成的,该网站需要来自请求者的表单输入.这是一个更好地演示我的问题的CodePen:http://codepen.io/twodee/pen/PGqgyw .(JSFiddle只允许https://来源.)

当我转动iframe时,3D立方体会缩放并且页面会滚动.

编辑:我所追求的效果是我在谷歌地图嵌入页面时看到的效果.或Sketchfab.当我将它们嵌入到iframe中时,我不必在进行嵌入的页面中做任何特殊操作,以便在不滚动的情况下进行缩放.嵌入式内容本身似乎有些东西会禁用滚动,但我不知道是什么.

Answer 1

正如其他人所说，preventDefault() 对于您的第一个示例（它是一个 div）来说效果很好。

但这在到外部站点的 iframe 上似乎不可能，因为 iframe 上仅捕获某些事件。在此 codepen 上，您可以看到 iframe 上捕获了 mouseenter 事件，但未捕获单击和滚轮事件。密切关注 console.log(target) 语句以及哪些有效，哪些无效。

代码笔

<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 内容，您可以将滚轮事件处理程序添加到框架内容中。尝试这个...

框架内容上的 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();
});