通过IFrame嵌套文档在线预览地址，加水印
var frame = document.getElementById(\'iframeSon\'); frame.contentWindow.postMessage("up", \'*\');
并通过
postMessage 跨域进行发鼠标滚动消息
<%-- Created by IntelliJ IDEA. User: liuyi16 Date: 2019/12/18 Time: 17:31 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>文档预览</title> <script src="/static/bootstrap/2.3.1/awesome/jquery.min.js"></script> <style> @media print{ body{display:none} } </style> </head> <body id="ttBody"> <iframe src="${viewUrl}" name="iframeSon" id="iframeSon" width="100%" height="100%" scrolling="no"></iframe> <script> //鼠标滚轮监听 var scrollFunc = function(e) { e = e || window.event; if(e.wheelDelta) { //IE/Opera/Chrome if (e.wheelDelta > 0) { //alert("上滚"); var frame = document.getElementById(\'iframeSon\'); frame.contentWindow.postMessage("up", \'*\'); } if (e.wheelDelta < 0) { //("下滚"); // var iframeSon = document.getElementById("iframeSon").contentDocument; //iframeSon.documentElement.scrollTop += 50; //iframeSon.documentElement.scrollLeft += 70; //iframeSon.slideDown("slow"); //var myIframe = document.getElementById(\'iframeSon\'); //myIframe.contentWindow.scrollTo(100,500); var frame = document.getElementById(\'iframeSon\'); frame.contentWindow.postMessage("down", \'*\'); } } else if(e.detail) { //Firefox if (e.wheelDelta > 0) { //alert("上滚"); var frame = document.getElementById(\'iframeSon\'); frame.contentWindow.postMessage("up", \'*\'); } if (e.wheelDelta < 0) { //alert("下滚"); var frame = document.getElementById(\'iframeSon\'); frame.contentWindow.postMessage("down", \'*\'); } } } /*注册事件*/ if(document.addEventListener) { document.addEventListener(\'DOMMouseScroll\', scrollFunc, false); } //W3C window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome </script> <script type="text/javascript"> window.onload = function() { document.onkeydown = function() { var e = window.event || arguments[0]; //屏蔽F12 if(e.keyCode == 123) { return false; //屏蔽Ctrl+Shift+I } else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)) { return false; //屏蔽Shift+F10 } else if((e.shiftKey) && (e.keyCode == 121)){ return false; } }; //屏蔽右键单击 document.oncontextmenu = function() { return false; } } waterMark({ waterMarkContent:\'${userNo}\', waterMarkId:\'ttBody\'//需要做水印的元素的id }); window.onresize = function(){ waterMark({ waterMarkContent:\'${userNo}\', waterMarkId:\'ttBody\'//需要做水印的元素的id }); } /* * @description添加水印 * @param {Obj} settings水印配置参数 */ function waterMark(markElement) { $(\'#\' + markElement.waterMarkId).find(\'.markElement\').remove(); var settings = { waterMarkId:"t1", waterMarkContent:"${userNo}", waterMarkX:-10, waterMarkY:40, waterMarkRows:10, waterMarkCols:20, waterMarkXSpace:0, waterMarkYSpace:0, waterMarkColor:\'#B0C4DE\', waterMarkAlpha:0.3, waterMarkFontSize:\'25px\', waterMarkFont:\'微软雅黑\', waterMarkWidth:120, waterMarkHeight:100, waterMarkAngle:15 }; if(arguments.length === 1 && typeof arguments[0] === "object" ) { var src = arguments[0]||{}; for(key in src) { if(src[key]&&settings[key] && src[key] === settings[key]) continue; else if(src[key]) settings[key] = src[key]; } } var obj = document.getElementById(settings.waterMarkId); var tmpObj = document.createDocumentFragment(); var pageWidth = obj.offsetWidth; var pageHeight = obj.offsetHeight ; if (settings.waterMarkCols == 0 || (parseInt(settings.waterMarkX + settings.waterMarkWidth *settings.waterMarkCols + settings.waterMarkXSpace * (settings.waterMarkCols - 1)) > pageWidth)) { settings.waterMarkCols = parseInt((pageWidth-settings.waterMarkX+settings.waterMarkXSpace) / (settings.waterMarkWidth + settings.waterMarkXSpace)); settings.waterMarkXSpace = parseInt((pageWidth - settings.waterMarkX - settings.waterMarkWidth * settings.waterMarkCols) / (settings.waterMarkCols - 1)); } if (settings.waterMarkRows == 0 || (parseInt(settings.waterMarkY + settings.waterMarkHeight * settings.waterMarkRows + settings.waterMarkYSpace * (settings.waterMarkRows - 1)) > pageHeight)) { settings.waterMarkRows = parseInt((settings.waterMarkYSpace + pageHeight - settings.waterMarkY) / (settings.waterMarkHeight + settings.waterMarkYSpace)); settings.waterMarkYSpace = parseInt(((pageHeight - settings.waterMarkY) - settings.waterMarkHeight * settings.waterMarkRows) / (settings.waterMarkRows - 1)); } var x; var y; settings.waterMarkRows = settings.waterMarkRows == 0 ? 6 : settings.waterMarkRows; for (var i = 0; i < settings.waterMarkRows-1; i++) { y = settings.waterMarkY + (settings.waterMarkYSpace + settings.waterMarkHeight) * i; y = isNaN(y) ? 40 : y; for (var j = 0; j < settings.waterMarkCols; j++) { x = settings.waterMarkX + (settings.waterMarkWidth + settings.waterMarkXSpace) * j; var markElement = document.createElement(\'div\'); markElement.id = \'markElement\' + i + j; markElement.appendChild(document.createTextNode(settings.waterMarkContent)); //设置水印div倾斜显示 markElement.style.webkitTransform = "rotate(-" + settings.waterMarkAngle + "deg)"; markElement.style.MozTransform = "rotate(-" + settings.waterMarkAngle + "deg)"; markElement.style.msTransform = "rotate(-" + settings.waterMarkAngle + "deg)"; markElement.style.OTransform = "rotate(-" + settings.waterMarkAngle + "deg)"; markElement.style.transform = "rotate(-" + settings.waterMarkAngle + "deg)"; markElement.style.visibility = ""; markElement.style.position = "absolute"; markElement.style.left = x + \'px\'; markElement.style.top = y + \'px\'; markElement.style.overflow = "hidden"; markElement.style.zIndex = "10"; markElement.style.opacity = settings.waterMarkAlpha; markElement.style.fontSize = settings.waterMarkFontSize; markElement.style.fontFamily = settings.waterMarkFont; markElement.style.color = settings.waterMarkColor; markElement.style.textAlign = "center"; markElement.style.width = settings.waterMarkWidth + \'px\'; markElement.style.height = settings.waterMarkHeight + \'px\'; markElement.style.display = "block"; markElement.style.filter = "alpha(opacity="+ settings.waterMarkAlpha*100 +")"; markElement.setAttribute("class","markElement"); tmpObj.appendChild(markElement); }; }; obj.appendChild(tmpObj); //obj.appendChild("<div style=\'height: 100px;width: 100%\'></div>"); } </script> </body> </html>
view.aspx,接受消息，并获取同域名下的WordViewerFrame.aspx框架里面的
WACContainer进行滚动
<script> window.addEventListener(\'message\', function(event) { //event.data获取传过来的数据 //alert(event.data); if(event.data=="down"){ var iframeSon = document.getElementById("wacframe").contentDocument; if(iframeSon.getElementById("WACContainer")!=null){ //word iframeSon.getElementById("WACContainer").scrollTop =iframeSon.getElementById("WACContainer").scrollTop +50; } if(iframeSon.getElementById("m_excelWebRenderer_ewaCtl_sheetContentDiv")!=null){ //excel iframeSon.getElementById("m_excelWebRenderer_ewaCtl_sheetContentDiv").scrollTop =iframeSon.getElementById("m_excelWebRenderer_ewaCtl_sheetContentDiv").scrollTop +50; } } if(event.data=="up"){ var iframeSon = document.getElementById("wacframe").contentDocument; if(iframeSon.getElementById("WACContainer")!=null){//word iframeSon.getElementById("WACContainer").scrollTop =iframeSon.getElementById("WACContainer").scrollTop -50; } if(iframeSon.getElementById("m_excelWebRenderer_ewaCtl_sheetContentDiv")!=null){//excel iframeSon.getElementById("m_excelWebRenderer_ewaCtl_sheetContentDiv").scrollTop =iframeSon.getElementById("m_excelWebRenderer_ewaCtl_sheetContentDiv").scrollTop -50; } } }); </script>