iframe调整大小不正常

时间:2016-12-20 15:16:19

标签: javascript jquery html5 iframe

我使用的iframe增加了对拖动功能的支持,但是调整大小却不能很好地运行。 MouseUp大多数时间都没有被解雇。我该怎么办呢?



<!DOCTYPE html>
<html>
    <head>
        <title>MB Docs</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body style="margin:5px;">
        <table id="maingrid" cellpadding="0" cellspacing="0" style="border:0px;"><tr>
        <div style="float:left;">
            <td><iframe id="ifmenu" name="menu" height="600" width="200" style="border:1px solid #999;"></iframe></td>
            <td id="ifdivider" style="width:3px;cursor:col-resize;"></td>
            <td><iframe id="ifmain" name="main" height="600" width="300"  style="border:1px solid #999;"></iframe></td>
        </tr></table>
    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        function doResize() {
            //set height and width of frames
            var h = window.innerHeight - 10;
            $('#ifmenu').css('height', h);
            $('#ifmain').css('height', h);
        }
        
        window.onresize = function(event) {
            doResize();
        }
        
        $(document).ready(function() {
            doResize();
            
        //attach drag support divider.
        var isDragging = false;
        var xOffset = 0;
        $('#ifdivider').mousedown(function(e) {
            isDragging = true;
            xOffset = e.pageX;
            console.log('down');
        });

        $('#ifmenu').mouseup(function() {
            isDragging = false;
            console.log('up');            
        });

        $('#maingrid').mousemove(function(e) {            
            if (isDragging && e.pageX < 500) {
                $('#ifmenu').css('width',e.pageX - 2);
                console.log('move');            
            }
        });
        
});
    </script>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

拖动时,mouseUp和mouseMove事件可能发生在任何其他元素上。如果你将mouseUp / mouseMove移出窗口边界,它甚至可能在某些浏览器上根本不会出现。

您可以尝试将mouseUp和mouseMove事件放在整个文档而不是特定对象上,并且只有在开始拖动时才会删除,然后删除这些处理程序。

离。 (另)

numpy.exp