Jquery UI可resize – 调整放在iframe上的div的大小

如果你查看这个jsbin： http ：//jsbin.com/efosed/5/edit并按“Run with JS”，将会有一个可以用jquery uiresize的div。 一切都像预期的那样工作。 div被放置在“全屏”iframe上。 在链接示例中，此iframe具有： display: none 。

如果我修改它以display: block ，并重新运行脚本，则reziable插件会有一些奇怪的行为。 你可以在这里试试： http ： //jsbin.com/efosed/6/edit 。 它不会正确处理鼠标事件。 可能是什么原因，我该如何解决？

Answer 1

你必须实现自己的逻辑来修复iframe。 一种解决方案是在iframe上添加div：

DEMO

 $(function() { $('#resizable').resizable({ start: function(event, ui) { $('
') .css({ width:'100%', height: '100%', position: "absolute", opacity: "0.001", zIndex: 1000 }) .appendTo("body"); }, stop: function(event, ui) { $('.ui-resizable-iframeFix').remove() } }); }); 

对于支持CSS属性pointer-events 现代浏览器 ，有一个更好的解决方案，请参阅代码和jsbin：

DEMO

 $(function() { $('#resizable').resizable({ start: function(event, ui) { $('iframe').css('pointer-events','none'); }, stop: function(event, ui) { $('iframe').css('pointer-events','auto'); } }); }); 

Answer 2

你可以做得更简单：

使用Javascript

 $(function() { $('#resizable').resizable({ start: function(event, ui) { $(this).addClass('freeze') }, stop: function(event, ui) { $(this).removeClass('freeze') } }); }); 

CSS

 #resizable.freeze iframe { pointer-events: none; } 

Answer 3

仅CSS方法

.ui-resizable-resizing iframe {pointer-events：none; }

每当您resize时，都会添加ui-resizable-resizing类。