javascript - IframeResizer.js 在子页面的 javascript/mouseover 上将位置重置为 0,0
问题描述
我在内部 Web 环境中有一个相当普通的 IframeResizer.js 实现。我的子页面有一个由第 3 方应用程序生成的表格，其中包含一些与 TH 元素关联的 mouseover/hidden 和 javascript 标签（并且 TH 包含一个具有其他 mouseover/js 功能的表格）。
当表格第一次加载到子 iframe 中时，调整大小可以完美地工作。当我向下滚动并将鼠标悬停在 TH 元素上时，IframeResizer 会将页面位置重置为 0,0。我注意到，如果我在“记住的”滚动位置加载页面（例如，使用后退箭头时），mouseover 或 onclick javascript 元素也会将我的页面位置重置为该滚动位置。IframeResizer 中的某些内容正在触发我要禁用的重置位置。
这是我的嵌入代码（我切换了 autoresize:true 和 false；添加了“resizeFrom:'child'”和“tolerance:20”，但无济于事）：
<iframe id=myiframe src='http://localhost:9160/rdProcess.aspx?rdProcess=rptLink&rdTaskID=tskRptLink&rpt=InfoGo.goAnalysisGrid&rdSecureKey=@Local.SKey~' style='width: 100%;
frameborder: false;' frameborder='0'; scrolling='auto'>
</iframe>
<script>iFrameResize({log:true,
autoresize:false,
resizeFrom:'child',
tolerance:20,
checkOrigin:false,
heightCalculationMethod:'bodyScroll',
widthCalculationMethod:'scroll',
sizeWidth:true}, '#myiframe')</script>
页面本身的 TH 代码如下（抱歉输出复杂......这不是我的代码）：
<TH rdColumnSeq="" scope="col" CLASS="rdAgQbColor1" id="agCol_EncResourcesProvider_Provider-TH">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 0px; background-color: transparent;"><img id="agCol_EncResourcesProvider_Provider-DragHandle" style="visibility: hidden; float: left; padding-right: 4px;padding-left:2px;" src="rdTemplate/rdColumnDragHandle.png" alt="" />
</td>
<td style="padding: 0px; background-color: transparent;">
<a href="javascript:rdAjaxRequest('rdRequestForwarding=Form&rdReport=InfoGo.goAnalysisGrid&rdPaging=&rdShowModes=&rdDataCache=6875994668&rdSort=dtAnalysisGrid~EncResourcesProvider_Provider~Text~Ascending~Descending&dtAnalysisGrid-PageNr=0&rdRememberSort=True&rdDataTablePaging=True&rdAjaxCommand=RefreshElement&rdRefreshElementID=dtAnalysisGrid')">
</a>
<SPAN id="ExtraColumnHeader_Row1">
<a href="javascript:void(0);" class="rdThemePopupMenu rdPopupMenuActivate" data-popuplocation="" id="agColumnHeaderPopupMenu9_Row1">
<SPAN id="ExtraColumnHeaderLabel_Row1">Provider
</SPAN>
</a>
<DIV CLASS="rdPopupMenu" STYLE="position:absolute;visibility:hidden;" id="agColumnHeaderPopupMenu9_rdPopup_Row1">
<DIV CLASS="bd">
<UL CLASS="rdThemePopupMenu">
<LI>
<a href="javascript:void(0);" onclick="SubmitForm('rdPage.aspx?rdReport=InfoGo.goAnalysisGrid&rdAgCommand=HideDuplicates&rdAgHideDuplicatesColumn=EncResourcesProvider_Provider&rdAgCommandID=bfbd9b5e-907d-4ad0-bda0-84df3a5d37f9&rdSubmitScroll','','false','',null,['','','']);" id="ppo_HideDuplicates_rdPopupOptionItem_Row1">
<SPAN>Merge Duplicate Cells
</SPAN>
</a>
</LI>
</UL>
</DIV>
</DIV>
<INPUT TYPE="HIDDEN" VALUE="EncResourcesProvider_Provider" id="agCol_EncResourcesProvider_Provider_DataColumn_Row1" NAME="agCol_EncResourcesProvider_Provider_DataColumn_Row1">
</INPUT>
</SPAN>
</td>
<td class="rdResizeHeaderRow" style="padding: 0px; background-color: transparent;"><img id="agCol_EncResourcesProvider_Provider-ResizeHandle" style="visibility: hidden; float: right; padding-left: 4px;padding-right:0px;" src="rdTemplate/rdColumnResizeHandle.png" alt="" />
</td>
</tr>
</table>
</TH>
在鼠标悬停时，标题文本的左侧和右侧会显示“隐藏”图像，单击标题将弹出一个带有多个格式/操作选项的弹出框。触发这些隐藏图像或单击包含 javascript 调用以进行排序或执行其他操作的项目会触发调整大小并重置到 IframeResizer 中的位置 0,0。如果触发了调整大小，但不是重置到位置 0,0，我会喜欢它。
这是我控制台的内容，包括用于生成表格、调整大小、悬停和重置位置的 IframeResizer 日志条目。
VM469 iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Sending message to host page (myiframe:297:829:reset)
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Received: [iFrameSizer]myiframe:297:829:reset
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Size reset requested by iFrame
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Get page position: 0,0
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) height set to 297px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) width set to 829px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] [reset] Sending msg to iframe[myiframe] (reset) targetOrigin: *
VM469 iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Page size reset by host page
VM469 iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Sending message to host page (myiframe:297:829:resetPage)
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Received: [iFrameSizer]myiframe:297:829:resetPage
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Checking height is in range 0-Infinity
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Checking width is in range 0-Infinity
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Requesting animation frame
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) height set to 297px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) width set to 829px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Set page position: 0,0
DevTools failed to load source map: Could not load content for http://localhost:9160/_SupportFiles/iframeResizer.contentWindow.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
Theme.css:1 GET http://localhost:9160/_Themes/IRISTransit/Fonts.OpenSans.OpenSans-Regular-webfont.woff net::ERR_ABORTED 404 (Not Found)
Theme.css:1 GET http://localhost:9160/_Themes/IRISTransit/Fonts.OpenSans.OpenSans-Regular-webfont.ttf net::ERR_ABORTED 404 (Not Found)
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] [iFrame.onload] Sending msg to iframe[myiframe] (myiframe:8:true:true:32:true:true:null:bodyScroll:null:null:0:false:parent:scroll:true) targetOrigin: *
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] [reset] Sending msg to iframe[myiframe] (reset) targetOrigin: *
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Initialising iFrame (http://localhost:9160/rdPage.aspx?rdReport=InfoGo.goAnalysisGrid&rdQbCommand=UpdateQb&rdAgCommand=UpdateAgFromQb&rdAgCommandID=aca3a2f0-2002-4678-a287-780ba7cdc2d6&rdQbControlNr=1&rdBookmarkCollection=QA%20Enterprise%2001_jstevensgoCollection&rdBookmarkID=&rdBookmarkUserName=QA%20Enterprise%2001_jstevens&rdContentDivID=&rdDashPanelId=&rdEditThinkspace=&rdResetThinkspace=True)
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] TargetOrigin for parent set to: *
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] height calculation method set to "bodyScroll"
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] HTML & body height set to "auto"
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Enable public methods
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Mouse Enter
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Mouse Leave
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Animation Start
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Animation Iteration
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Animation End
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Input
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Mouse Up
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Mouse Down
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Orientation Change
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Print
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Ready State Change
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Touch Start
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Touch End
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Touch Cancel
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Transition Start
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Transition Iteration
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Add event listener: Transition End
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Create body MutationObserver
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] In page linking not enabled
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Trigger event lock on
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Sending message to host page (myiframe:1071:829:init)
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Trigger event: mutationObserver: [object HTMLTableCellElement] attributes
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Trigger event: mutationObserver: [object HTMLTableCellElement] attributes
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Trigger event: mutationObserver: [object HTMLUListElement] childList
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Page reset ignored by init
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Received: [iFrameSizer]myiframe:1071:829:init
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Checking height is in range 0-Infinity
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Checking width is in range 0-Infinity
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) height set to 1071px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) width set to 829px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Set page position: 0,0
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Reset trigger event: mutationObserver: [object HTMLUListElement] childList
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Sending message to host page (myiframe:1071:829:reset)
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Received: [iFrameSizer]myiframe:1071:829:reset
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Size reset requested by iFrame
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Get page position: 0,0
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) height set to 1071px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) width set to 829px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] [reset] Sending msg to iframe[myiframe] (reset) targetOrigin: *
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Page reset ignored by init
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Sending message to host page (myiframe:0:0:mouseenter:441:729)
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Received: [iFrameSizer]myiframe:0:0:mouseenter:441:729
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Trigger event lock off
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] --
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Trigger event: mutationObserver: [object HTMLImageElement] attributes
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Reset trigger event: mutationObserver: [object HTMLImageElement] attributes
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Trigger event lock on
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Sending message to host page (myiframe:1071:829:reset)
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Trigger event: mutationObserver: [object HTMLImageElement] attributes
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Received: [iFrameSizer]myiframe:1071:829:reset
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Size reset requested by iFrame
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) height set to 1071px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) width set to 829px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] [reset] Sending msg to iframe[myiframe] (reset) targetOrigin: *
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Page size reset by host page
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Sending message to host page (myiframe:1071:829:resetPage)
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Received: [iFrameSizer]myiframe:1071:829:resetPage
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Checking height is in range 0-Infinity
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Checking width is in range 0-Infinity
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Requesting animation frame
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) height set to 1071px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) width set to 829px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Set page position: 0,0
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Reset trigger event: mutationObserver: [object HTMLImageElement] attributes
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Sending message to host page (myiframe:1071:829:reset)
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Received: [iFrameSizer]myiframe:1071:829:reset
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Size reset requested by iFrame
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Get page position: 0,0
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) height set to 1071px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) width set to 829px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] [reset] Sending msg to iframe[myiframe] (reset) targetOrigin: *
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Page size reset by host page
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Sending message to host page (myiframe:1071:829:resetPage)
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Received: [iFrameSizer]myiframe:1071:829:resetPage
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Checking height is in range 0-Infinity
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Checking width is in range 0-Infinity
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Requesting animation frame
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Trigger event: mutationObserver: [object HTMLImageElement] attributes
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Trigger event: mutationObserver: [object HTMLImageElement] attributes
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) height set to 1071px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) width set to 829px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Set page position: 0,0
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Reset trigger event: mutationObserver: [object HTMLImageElement] attributes
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Sending message to host page (myiframe:1071:829:reset)
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Received: [iFrameSizer]myiframe:1071:829:reset
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Size reset requested by iFrame
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Get page position: 0,0
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) height set to 1071px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) width set to 829px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] [reset] Sending msg to iframe[myiframe] (reset) targetOrigin: *
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Page size reset by host page
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Sending message to host page (myiframe:1071:829:resetPage)
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Received: [iFrameSizer]myiframe:1071:829:resetPage
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Checking height is in range 0-Infinity
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Checking width is in range 0-Infinity
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Requesting animation frame
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) height set to 1071px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] IFrame (myiframe) width set to 829px
iframeResizer.min.js:8 [iFrameSizer][Nested host page: myiframe] Set page position: 0,0
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Trigger event lock off
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] --
iframeResizer.contentWindow.min.js:9 [iFrameSizer][myiframe] Sending message to host page (myiframe:0:0:mouseleave:396:771)
2021-12-08 更新 - 我以为我已经通过不同的高度和宽度设置解决了这个问题，但我仍然看到重置。看到页面将位置重置到最初加载子框架的位置也可能会有所帮助，因此如果我在子框架的中间并滚动到鼠标悬停点，“设置页面位置”会重置到该点。
我在配置 IframeResiser 时是否遗漏了某个设置或某些内容？如何禁用重置位置命令和/或让它停止触发 js 元素的 onmouseover/onclick？
解决方案
在测试了父 iframe 选项的各种组合后，我发现 heightCalculationMethod 导致了这个问题。使用“lowestElement”选项解决了这个问题。
推荐阅读
- c# - 在 WPF 中序列化和反序列化 UserControl 依赖属性
- azure - 如何在不停止 VM 的情况下更改 VM 公共 IP 地址
- reactjs - 更新使用 firebase 托管的 react 项目
- javascript - load 函数不加载新内容
- python - 如何解析numpy数组python中的数据点？
- python - 按时间箱/间隔计算并发用户会话
- javascript - 即使使用时区设置，两个日期之间的时间差也会返回错误
- google-sheets - 当行被移动并且上面的行发生变化时在上面添加列
- r - 如何在r中为回归线上方和下方的ggplot点着色？
- python - 尽管 Big-O 相同，为什么这两个函数的性能差异如此之大？