Question

我在iframe旁边放了一个div。我想用图像中所示的切换器调整iframe / div的大小。虽然，我尝试使用以下内容：

只有当两个div并排放置时，它们似乎才能正常工作。但是，当我在左侧放置1个div而在右侧放置一个iframe时，它们在尝试调整大小时都表现得很奇怪。我也尝试将iframe放入div中，但也有一些尴尬。

为了让事情更容易理解，我基本上在寻找类似http://jsbin.com或http://jsfiddle.net功能的内容。它们似乎都有iframe（“结果”区域），可以完美地调整大小。

我一直在寻找使用HTML，CSS / CSS3，JavaScript，JQuery，JQuery UI的解决方案。任何帮助表示赞赏。

Answer 1

这绝对不是我所知道的最好的方式，但它可能是一个开始。我没有对此做过任何研究，只是根据一些简单的推理尝试了我的手。我看到的一个大问题是将鼠标放在iframe上，所以我通过改变iframe的z-index和相应的叠加div来解决这个问题。没有测试跨浏览器，只是chrome。无论如何，也许这里有些东西可以提供帮助。我建议复制粘贴它并在本地运行它。它分为两个不同的文件。

第一档：

<!DOCTYPE html>
<html>
<head>
<style>
    #main_wrapper{
        position:relative;
        display:block;
        width:810px;
        height:800px;
    }
    #left_wrapper{
        background-color: yellow;       
        position:relative;
        float:left;
        width:400px;
        height:800px;
        padding:0px;
        margin:0px;
    }
    #right_wrapper{
        background-color: blue; 
        position:relative;
        float:right;
        width:400px;
        height:800px;
        padding:0px;
        margin:0px;
    }
    #middle_bar{
        background-color: black;        
        position:relative;
        float:left;
        width:10px;
        height:800px;
        margin:0px;
    }
    #middle_bar:hover{
        cursor:move;
    }
    #overlay_div{
        z-index: 1;
        background-color: rgba(10,10,10,.1);
        position:absolute;
        width:100%;
        height:100%;
    }
    #my_iframe{
        z-index: 2;
    }
</style>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
    starting_mouse_pos = 0; 
    mouse_down = false;

    $('#middle_bar').on('mousedown', function(event){                           
        starting_mouse_pos = event.pageX;
        mouse_down = true;      
        $('#overlay_div').css('z-index', '2');
        $('#my_iframe').css('z-index', '1');
    });
    $('#main_wrapper').on('mouseup', function(){
        mouse_down = false;
        $('#overlay_div').css('z-index', '1');
        $('#my_iframe').css('z-index', '2');
    });
    $('#main_wrapper').on('mousemove', function(event){     
        if(mouse_down){
            var ending_mouse_pos = event.pageX;             
            update_the_sizes(ending_mouse_pos);             
            starting_mouse_pos = ending_mouse_pos;
        }       
    });
    function update_the_sizes(ending_mouse_pos){
        var length_of_move = starting_mouse_pos - ending_mouse_pos;
        $('#left_wrapper').css('width', '-='+length_of_move);
        $('#right_wrapper').css('width', '+='+length_of_move);
        $('#my_iframe').css('width', '+='+length_of_move);      
    }   
}); 
</script>
</head>
<body>
<div id="main_wrapper">
    <div id="left_wrapper"></div>
    <div id="middle_bar"></div>
    <div id="right_wrapper">
        <div id="overlay_div"></div>
        <iframe id="my_iframe" width="400px" height="800px" src="myIframe.html" seamless></iframe>
    </div>
</div>
</body>
</html>

第二个文件（myIframe.html）：

<!DOCTYPE html>
<html>
<head>
<style>
    #main_wrapper{
        position:relative;
        display:block;
        width:150px;
        height:150px;
        margin-left:auto;
        margin-right:auto;
        background-color: purple;
    }
    body{
        background-color: green;
    }

</style>

<script>

</script>
</head>
<body>
<div id="main_wrapper"> 
</div>
</body>
</html>

如何调整iframe的大小，并像jsbin或jsfiddle一样并排布局

1 个答案: