实现参考 js实现右键菜单功能
使用后父页面右键有效,子页面无效
于是先试用右键禁用功能
本页面右键禁用代码
window.document.oncontextmenu = function(){
alert('请不要点击鼠标右键!');
return false;
}
IFrame中右键禁用代码
document.getElementById('mainFrame').onload = function(){
window.document.getElementById('mainFrame').contentWindow.document.oncontextmenu = function(){
alert('请不要点击鼠标右键!');
return false;
}
}
要在Iframe加载的时候进行设置onload()
二次补充详细代码:
禁用完右键若能实践则说明该方法有效,可以继续按照该方法
定义一个id为menu的DIV,在CSS样式中设置不可见,在每次右击时才可见
<div id="menu">
<div id="pd" class="menu">派单</div>
<div id="jp" class="menu">截屏</div>
</div>
CSS样式
#menu{
width: 90px; /*设置为0 隐藏自定义菜单*/
height: 125px;
overflow: hidden; /*隐藏溢出的元素*/
box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
position: absolute; /*自定义菜单相对与body元素进行定位*/
display: none;
font-size:13px;
font-family: Microsoft Yahei;
color:#000000;
background:#ffffff;
}
.menu{
width: 130px;
height: 25px;
line-height: 25px;
padding-left: 30px;
}
.menu:hover{
width: 130px;
height: 25px;
line-height: 25px;
padding-left: 30px;
background-color:#707070;
}
比如我的iframe的id为mainframe
document.getElementById('mainFrame').onload = function(){
var menu = document.getElementById("menu");
window.document.getElementById('mainFrame').contentWindow.document.oncontextmenu = function(e) {
var e = e || window.event;
//鼠标点的坐标
var oX = e.clientX;
var oY = e.clientY;
// 菜单出现后的位置,如果该iframe页面是嵌在父页面中,位置需要另外修改
// 此时menu显示
menu.style.display = "block";
menu.style.left = oX + "px";
menu.style.top = oY + "px";
//阻止浏览器默认事件
return false;//一般点击右键会出现浏览器默认的右键菜单,写了这句代码就可以阻止该默认事件。
}
// iframe点击事件,将menu隐藏
window.document.getElementById('mainFrame').contentWindow.onclick = function(e) {
var e = e || window.event;
menu.style.display = "none"
}
// 点击menu事件
menu.onclick = function(e) {
var pd = document.getElementById("pd");
var jp = document.getElementById("jp");
pd.onclick = function(e){
alert("pd");;
}
jp.onclick = function(e){
alert("jp");
}
var e = e || window.event;
e.cancelBubble = true;
}
}
效果