参考:
2016-1-20(document.createEvent事件模拟)_‘’小蜜峰‘’-CSDN博客
键盘事件 KeyboardEvent() - Web API 接口参考 | MDN (mozilla.org)
1.环境:
doucment内部嵌套iframe 上下方向键模拟左右方向键,在iframe中收到事件,Google Chrome 版本 87.0.4280.66(正式版本) (64 位)
此方法对IE不友好
2.HTML部分:
<body>
<div id="content">
<div id="list"></div>
<div>
<iframe id="iframe" src="./index.html" onclick="ifClick"></iframe>
<div id="set_div">
<span id="catalog" title="目录"
><img src="./icons/index.png" alt="目录" class="imgIcon"
/></span>
<span id="prev_car" title="上一动画">≪</span>
<span id="prev" title="上一页">➤</span>
<span id="slideIndex"></span>
<span id="next" title="下一页">➤</span>
<span id="next_car" title="下一动画">≫</span>
<span id="play_pause" title="播放/暂停"></span>
<span id="fullScreen" title="全屏/退出全屏"></span>
</div>
</div>
</div>
<script src="./player.origin.js"></script>
</body>
3.JavaScript 部分主要代码
//iframe window
var win = document.getElementsByTagName("iframe")[0].contentWindow.window;
//浏览器版本
var network = navigator.userAgent.toLowerCase();
01:将对象调整为iframe内部document;监听点击事件
window.onload = function () {
//获取iframe document对象
var iframeDoc = document.getElementsByTagName('iframe')[0].contentWindow.document
keyCodeChange(iframeDoc)
}
//监听点击事件
document.addEventListener("click", function (ev) {
var iframeDoc = document.getElementsByTagName("iframe")[0].contentWindow
.document;
win.focus(); //焦点始终在ppt上
prevCarToon(iframeDoc);
});
02:监听键盘事件
//监听上下键转为左右键
function keyCodeChange(iframeDoc) {
iframeDoc.onkeydown = function (event) {
console.log('event===', event)
var e = event || window.event || arguments.callee.caller.arguments[0]
if (e && e.keyCode) {
//next 下40\右39\down34;prev 上38\左37\up33
console.log('code========', e.keyCode)
if (network.indexOf('trident') > -1) {
//IE
pageChange(e.keyCode)
} else {
if (e.keyCode === 38) {
if (slideIndexNum !== 0) {
fireKeyEvent(iframeDoc, 'keydown', 37)
}
} else if (e.keyCode === 40) {
if (slideIndexNum === 0) {
jumpPage(1)
} else {
fireKeyEvent(iframeDoc, 'keydown', 39)
}
}
}
}
}
}
03:模拟键盘事件
//模拟键盘左右键
function fireKeyEvent(el, evtType, keyCode) {
var doc = el
//获取iframe window对象,键盘挂在到iframe的window上
var evtObj
if (doc.createEvent) {
if (win.KeyboardEvent) {
//原方法中使用KeyEvents
//但此方法虽模拟了左右键,但事件并非keybord触发,触发不到iframe中使用到的插件
//对比了原始左右键,和上下键模拟左右键,发现是触发事件不同导致
evtObj = doc.createEvent('KeyboardEvent')
Object.defineProperty(evtObj, 'keyCode', {
get: function () {
return this.keyCodeVal
},
})
Object.defineProperty(evtObj, 'which', {
get: function () {
return this.keyCodeVal
},
})
if ((keyCode === 13 || keyCode === 16) && scp) {
evtObj.initKeyboardEvent(
evtType,
true,
false,
win,
false,
false,
false,
true,//此处设置了shiftKey=true,IE中无效。。。
keyCode,
0
);
evtObj.keyCodeVal = keyCode;
evtObj.shiftKey = true;
console.log("evtObj==11", evtObj);
} else {
if (network.indexOf("trident") > -1) {
//ie处理-_-,少参数报错。。
evtObj.initKeyboardEvent(
evtType,
true,
false,
win,
false,
false,
false,
false,
keyCode,
0
);
evtObj.keyCodeVal = keyCode;
} else {
evtObj.initKeyboardEvent(evtType, true, true, win, 1);
evtObj.keyCodeVal = keyCode;
}
}
if (evtObj.keyCode !== keyCode) {
console.log('keyCode ' + evtObj.keyCode + ' 和 (' + evtObj.which + ') 不匹配')
}
} else {
evtObj = doc.createEvent('UIEvents')
Object.defineProperty(evtObj, 'keyCode', {
get: function () {
return this.keyCodeVal
},
})
Object.defineProperty(evtObj, 'which', {
get: function () {
return this.keyCodeVal
},
})
evtObj.initUIEvent(evtType, true, true, win, 1)
evtObj.keyCodeVal = keyCode
if (evtObj.keyCode !== keyCode) {
console.log('keyCode ' + evtObj.keyCode + ' 和 (' + evtObj.which + ') 不匹配')
}
}
el.dispatchEvent(evtObj)
} else if (doc.createEventObject) {
evtObj = doc.createEventObject()
evtObj.keyCode = keyCode
el.fireEvent('on' + evtType, evtObj)
}
}
04:组合键触发事件 ** 组合键在IE中只会识别最后一次传入的按键
//页内小动画按钮
function prevCarToon(iframeDoc) {
prevCarBtn.onclick = function () {
if (slideIndexNum !== 0) {
if (network.indexOf("trident") > -1) {
//ie处理-_-
fireKeyEvent(iframeDoc, "keydown", 37, false);
} else {
//shift + enter 组合键
console.log("shift + enter 组合键==");
fireKeyEvent(iframeDoc, "keydown", 16, true);
fireKeyEvent(iframeDoc, "keydown", 13, true);
}
}
};
nextCarBtn.onclick = function () {
if (slideIndexNum === 0) {
jumpPage(1, false, false);
} else {
//enter 键
fireKeyEvent(iframeDoc, "keydown", 13, false);
}
};
}