1

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

http://layout.jquery-dev.net/

http://methvin.com/splitter/

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

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

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

图片

4

1 回答 1

0

这绝对不是我所知道的最好的方式，但它可能是一个开始。我没有对此进行任何研究，只是根据一些简单的推理尝试了我的手。我看到的最大问题是将鼠标位置放在 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>
于 2013-08-04T22:28:01.953 回答