光标位置的页面缩放（比例）

Question

我正在开发一款将Javascript注入网页视图（类似于iframe）的Chrome应用。 JS侦听在webview中右键单击，并放大（缩放）webview的内容，使缩放在光标位置居中。换句话说，如果我要在webview中构建StackOverflow.com并右键单击S.O.在页面左上角附近的徽标，webview应该以S.O.为中心。徽标，随着它放大。

我相对关闭，但我的数学（或逻辑）显然有点偏。这是JS我注入webview（＆＃34;窗口＆＃34;，＆＃34;文档＆＃34;等等，下面是指webview内的网页，而不是父窗口）。

window.oncontextmenu = function (){  // when the webview content is right-clicked...
    var page = document.getElementsByTagName('body')[0];  // get the webview body element
    // get cursor location inside webview...
    var cursorX = event.clientX;  
    var cursorY = event.clientY; 
    // get scrollbar offset inside webview...
    var scrollX = page.scrollLeft; 
    var scrollY = page.scrollTop; 
    // scrollbar offset +  cursor location (I'm *not* sure if this is the correct logic, but it gets me fairly close)...
    var x = scrollX + cursorX; 
    var y = scrollY + cursorY; 
    page.style.transformOrigin = x + 'px ' + y + 'px';  // set CSS transform origin (the pixel location where the scales centers)
    page.style.transform = 'scale(10)';  // Zoom in 10X 
    return false; 
}

仅供参考，我的应用程序中webview的大小会有所不同，具体取决于最终用户的屏幕大小，因此我需要考虑到这一点的代码。如果webview是固定大小的，那么我认为数学会更容易一些。

谢谢。