從iFrame運行父級Javascript

I have page (Red) with an iFrame on (whi te）。在iFrame的代碼中，還有另一個包含另外2頁的iFrame（綠色&藍色）。從iFrame運行父級Javascript

在紅色頁面中，我有一些Javascript，當鼠標懸停在屏幕的右側（右側300px）時，允許隱藏側邊欄出現。這可以正常工作，但是如果用戶將鼠標拉開並將光標懸停在iFrame中的紅色或綠色頁面上，則側欄將不會縮回。但是，如果用戶將光標縮回到紅色區域（頂部和左側），則側欄會按預期縮回。我假設紅色和綠色頁面中沒有代碼告訴側欄在發生鼠標懸停時收回。

我的問題是，我真的很喜歡Javascript。不管鼠標光標在哪裏結束，我怎麼會讓側欄收起？任何幫助真的會被讚賞。由於

$(window).on('mousemove',function(e){ 
 
     
 
    if(e.pageX >= $(window).width() - 300 || e.target.id=='sidebar'){ 
 
     $('#sidebar').css({'right':'0px'}); 
 
    } 
 
    else{ 
 
    $('#sidebar').css({'right':'-300px'}); 
 
    } 
 
    
 
});

來源

2017-05-17 head_bigg

鼠標側邊欄*」如果用戶將鼠標移開並將光標懸停在iFrame「*」中的紅色或綠色頁面上。我假設你是指藍色和綠色？ – Ozgar

這是因爲你正在監聽窗口上的事件，而窗口是指你的主窗口而不是iframe。將事件附加到您的iframe –

我試圖將它們添加到iframe中，但迄今爲止沒有運氣，但再次，我真的很喜歡JavaScript，所以如果你有一個真正有用的例子。 –

-1

你能嘗試改變鼠標移動事件中使用鼠標移出和鼠標？

$(window).on('mousein',function(e){ 
    $('#sidebar').css({'right':'0px'}); 
} 
$(window).on('mouseout',function(e){ 
    $('#sidebar').css({'right':'-300px'}); 
});

而且我想可能使用這種基於CSS的解決方案，而是採用了:hover選擇顯示/表明隱藏在

.sidebar-container{ 
 
    width:300px; 
 
    height:100%; 
 
    background:#999; 
 
    position:absolute; 
 
    left:0px; 
 
    top:0px; 
 
} 
 

 
.sidebar-container .sidebar{ 
 
    width:100%; 
 
    height:100%; 
 
    background:#465; 
 
    position:absolute; 
 
    left:-300px; 
 
    top:0px; 
 
    transition:all 0.5s; 
 
} 
 

 
.sidebar-container:hover .sidebar{ 
 
    left:0px 
 
}

<div class="sidebar-container"> 
 
    <div class="sidebar">Hi!</div> 
 
</div>

來源

2017-05-17 14:06:47

這工作，但是這將涉及我重新設計整個頁面，我想盡可能避免更多的工作。是不是我可以添加到運行「close Sidebar」Javascript的iframe中？ –

沒關係！你有沒有嘗試改變鼠標/鼠標（我的答案的第一部分）？：] –

它並沒有遺憾:(我幾乎覺得應該有一些東西添加在與iframe相關的'else'之後......我只是不知道JavaScript甚至嘗試寫入它的語法:( –

從iFrame運行父級Javascript

回答

相關問題