TechQA.

IframeResizer.js resetting position to 0,0 on javascript/mouseover in child page

511 views Asked by At

I have a fairly vanilla implementation of IframeResizer.js in an internal web environment. My child page has a table generated by a 3rd party application with some mouseover/hidden and javascript tags associated with the TH elements (and the TH contains a table with other mouseover/js features).

When the table first loads in the child iframe, the resizer works perfectly. When I scroll down and mouseover the TH elements, IframeResizer resets the page position to 0,0. I've noticed that if I load the page at a 'remembered' scroll position (when using the back arrow for example), mouseover or onclick javascript elements reset my page position to that scroll position as well. Something in IframeResizer is triggering a reset position that I want to disable.

Here is my embed code (I've toggled autoresize:true and false; added "resizeFrom:'child'," and "tolerance:20,", to no avail):

<iframe id=myiframe src='http://localhost:9160/rdProcess.aspx?rdProcess=rptLink&rdTaskID=tskRptLink&rpt=InfoGo.goAnalysisGrid&[email protected]~'  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>

The TH code in the page itself is as follows (sorry for the convoluted output... it isn't my code):

<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&amp;rdReport=InfoGo.goAnalysisGrid&amp;rdPaging=&amp;rdShowModes=&amp;rdDataCache=6875994668&amp;rdSort=dtAnalysisGrid~EncResourcesProvider_Provider~Text~Ascending~Descending&amp;dtAnalysisGrid-PageNr=0&amp;rdRememberSort=True&amp;rdDataTablePaging=True&amp;rdAjaxCommand=RefreshElement&amp;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&amp;rdAgCommand=HideDuplicates&amp;rdAgHideDuplicatesColumn=EncResourcesProvider_Provider&amp;rdAgCommandID=bfbd9b5e-907d-4ad0-bda0-84df3a5d37f9&amp;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>

On mouseover there are 'hidden' images shown on the left and the right of the header text, and clicking the header will pop open a popup box with several formatting/manipulation options. Something about triggering these hidden images or clicking on an item which contains javascript calls to sort or perform other operations triggers a resize AND a reset to position 0,0 in IframeResizer. I'd love it if the resize were triggered, but NOT the reset to position 0,0.

Here are the contents of my console, including the IframeResizer log entries for generating the table, resize, hover, and reset of position.

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 update - I thought that I had resolved this with different height and width settings, but I am still seeing the resetting. It may also be helpful to see that the page resets the position to wherever the child frame initially loaded, so if I'm in the middle of the child frame and scroll to a mouseover point the "Set page position" resets to that point.

Is there a setting or something that I've missed in configuring IframeResiser? How do I disable the reset position command and/or get it to stop firing onmouseover/onclick of js elements?

javascript jquery iframe-resizer
Original Q&A
1

There are 1 answers

0
jtrauma On

After testing various combinations of parent iframe options, I found that the heightCalculationMethod was causing this issue. Using the "lowestElement" option resolved this issue.

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in IFRAME-RESIZER

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions