2

絶対に配置された div を、div がある iframe の境界線の上に置く方法があるかどうか疑問に思っています。これを行うことはできますか?

私の場合: ファイルのリストを含む iframe があり、各ファイルの右端にボタンがあります。コンテキストメニューのようないくつかの機能を備えた div-popup が必要です。ただし、このボタンは iframe の端にあるため、絶対位置の div は iframe ビューポートの背後/外側に配置されます。ドキュメントの残りの部分、iframe の外側にオーバーレイしたい。

​<iframe width="100" height="100">
div would be in here, say 300 x 100 px.
</iframe>
overlayed div should be visible here as well, basically the div should overlay the iframe.​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
4

2 に答える 2

5

まあ、技術的にはそれはできません。ただし、iframe 内のイベントをハイジャックすると、メイン ウィンドウでコンテキスト メニューを再作成し、iframe 内の div の相対位置 + iframe 自体の絶対位置を使用できます。

つまり、コンテキスト メニューは iframe の外側にあり、iframe 内のイベントによって操作できます。

それがどのようにできるかをお見せしましょう。私はあなたのコードを持っていないので、非常に大雑把な概念実証を行っているだけです。:)

例| コード

HTML

<iframe id='my_frame'></iframe>

<div id='copy_to_frame'>
    <ul id='files_list'>
        <li>data.dat</li>
        <li>manual.html</li>
        <li>readme.txt</li>
        <li>model1.obj</li>
        <li>human_model.obj</li>
    </ul>
</div>

<div class='context_menu'>
    <ul>
        <li>Delete</li><li>Open</li><li>Move</li><li>Copy</li>
    </ul>
</div>

Javascript

//Declare the necessary variables, good practice
var frame = $("#my_frame"),
    frame_contents = frame.contents(),
    frame_body = frame_contents .find("body"),
    copy_list = $("#copy_to_frame"),
    context_menu = $(".context_menu");

var bInside = false;

//Fill the iframe with a list
frame_body.html(copy_list.html());
copy_list.hide();
paint();

//Attach event handler for context menu popup etc.
$("#files_list li", frame_body).click(function(e){
    var $this = $(this);
    var rel_x = $this.position().left + $this.outerWidth() + 5,
        rel_y = $this.position().top + $this.outerHeight()/2 - context_menu.outerHeight()/2 - frame_body.scrollTop(),
        abs_x = frame.offset().left,
        abs_y = frame.offset().top;

    e.stopPropagation();

    context_menu.css({
        top: rel_y + abs_y,
        left: rel_x + abs_x
    });

    //Show the context menu in this window
    context_menu.show();
    paint($this);
});

//Hide when clicking outside the context menu
$(document).add(frame_body).click(function(){
    if(!bInside){
        context_menu.hide();
        paint();
    }
});

//Determine if mouse is inside context menu
context_menu.mouseenter(function(){
    bInside = true;
}).mouseleave(function(){
    bInside = false;
});

function paint(el){
    $("#files_list li", frame_body).css({
        "background-color": "white",
        "border": "1px solid transparent"
    });

    if(el){
        el.css({
            "background-color": "#ddecfd",
            "border": "1px solid #7da2ce"
        });
    }
}

CSS

#my_frame{
    position: absolute;
    border: 1px solid gray;
    width: 200px;
    height: 100px;
    top: 50%; left: 50%;
    margin-top: -62.5px;
    margin-left: -100px;
    z-index: 1;
}


.context_menu{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 2;
}

.context_menu ul{
    border: 1px solid black;
    border-right: 0;
    display: inline-block;
}

.context_menu li{
    display: inline-block;
    border-right: 1px solid black;
    padding: 2px;
    text-align: center;
    margin: 0px;
    cursor: default;
}

.context_menu li:hover{
    background-color: lightgray;
}
于 2012-12-12T14:46:44.697 に答える
2

これは、提供された最小限の情報に基づく少しの推測ですが...

次のように、jQueryを使用して親ドキュメント内からのコンテンツを操作できます。<iframe>

$('#myFrame').contents().find('a').click(function() { /*...*/ });

これにより、ユーザーが内をクリックしたことを検出できます<iframe>。次に、オーバーレイを配置する場所を決定できます<div>。

オーバーレイを設定<div>する必要がありposition: fixedます。jQueryの.offset()メソッドを使用して、の座標と、<iframe>内でクリックされたリンクを取得できます<iframe>。これらの2つの値を使用<div>して、親ドキュメントのどこにオーバーレイを配置するかを計算できます。たとえば、オーバーレイをの左側に配置し、<iframe>クリックされたリンクと同じ垂直レベルに配置するには、次のようにします。

$('#overlayDiv')
    .offset({
        left: $('#myFrame').offset().left - $('#overlayDiv').width(),
        top: $('#myFrame').offset().top + $(this).offset().top
    })

それがどのように機能するかの基本的な例については、このフィドルを参照してください：http: //jsfiddle.net/Gxd3M/2/

（これは、親ドキュメントとiframeのコンテンツが両方とも同じサーバーからのものである、つまり同じオリジンを持っていることを前提としていることに注意してください。）

于 2012-12-12T14:39:35.213 に答える