BFTB App: Rare error on creating new window followed by calling JS function of window.opener to write to new window; Related test program

Last updated on 26 Apr. 2024

26 Apr. 2024 Update

I think I now understand when such errors could happen. window.opener may be non-null but not the index page! I am not sure of the exact conditions when that can happen. But I think it can happen. I did some tests on localhost and I think I was able to recreate the same error but do not have the clear sequence of my actions. If window.opener is not null and not the index page then there may not be a updateBlogbookPage() function in it and so this error would happen.

I am testing out various possibilities using a test project. I think the solution lies in naming the index page window and then checking whether the window.opener.name is the name of the index page window before invoking updateBlogbookPage() function.

Error conditions and associated key log statements

Background: https://developer.mozilla.org/en-US/docs/Web/API/Window/open states "If the browser successfully opens the new browsing context, a WindowProxy object is returned." So below sections refer to WindowProxy object.

----------

Using Live Server Extn on VSCode on PC: http://127.0.0.1:4000/ 

Condition: Update of VSCode project resulting in reload of index page and bb.html page at which time index page variables are re-initialized (and so index page loses blogbook (BB) window associated WindowProxy object). 

Log:

13:10:00.100 bb.html:12 window.name = BBWin

13:10:00.100 bb.html:14 window.opener.name = BBIndex

13:10:00.101 bb.html:23 window.opener.writeBB() was invoked but returned failure (false)

13:10:00.101 script.js:12 writeBB function called

13:10:00.101 script.js:14 Blogbook window not defined

------------

Using Live Server Extn on VSCode on PC: http://127.0.0.1:4000/ 

Condition: After successful write to BB window, closing index page window and then refreshing BB window.

Log:

13:23:53.008 bb.html:12 window.name = BBWin

13:23:53.009 bb.html:35 window.opener evaluates to false (is probably undefined or null)

------------

Using Live Server Extn on VSCode on PC with a mix of: http://localhost:4000/ (index page) and http://127.0.0.1:4000/

Condition: After successful writes to BB windows, using both http://localhost:4000/ (index page) and http://127.0.0.1:4000/ , closing http://127.0.0.1:4000/ index page window and then refreshing http://127.0.0.1:4000/bb.html.

Log:

13:30:01.867 bb.html:12 window.name = BBWin

13:30:01.868 bb.html:14 Uncaught DOMException: Failed to read a named property 'name' from 'Window': Blocked a frame with origin "http://127.0.0.1:4000" from accessing a cross-origin frame.

    at handleLoad (http://127.0.0.1:4000/bb.html:14:61)

    at onload (http://127.0.0.1:4000/bb.html:8:31)

[I think this CORS error is artificially created by me. I doubt I will face this issue on netlify or even on localhost for normal usage of the app (where I will use either localhost or 127.0.0.1 for both index page and blogbook windows and not a mix of localhost and 127.0.0.1. So I am not investing time in handling this gracefully. As of now, for this case, the blogbook content does not get updated and no alert message is shown to user.]

I have published the above mentioned test program on Github and it is deployed here:  https://ravisiyer.github.io/JSWriteOnNewWindow/.

--------------

End 26 Apr. 2024 Update

Once in a while, on netlify, the blogbook page of the Blogger Feed To HTML Book App (BFTB) shows only the placeholder content.

On 25 Apr. 2024, it happened and I checked the console log. It gave the error:

"Uncaught TypeError: window.opener.updateBlogbookPage is not a function"

and provided the line having "window.opener.updateBlogbookPage();" as the line for the error.

Closing the blogbook window and trying again from the index page worked. I don't recall whether I reloaded the index page.

The problem occurs rarely and only on netlify but not on localhost. I don't want to invest time now in figuring out why it is happening on netlify, as it is a rare problem. However I want to inform the user that he/she should close this window and try again. So I added try-catch code around the above "window.opener.updateBlogbookPage();" statement with the catch block logging info. to the console and showing an alert to the user.

The screenshot (slightly edited to hide some not-relevant info.) of the error is given below.

[On PC desktop/laptop, to open pic in larger resolution (if available), right-click on pic followed by open link (NOT image) in new tab/window. In new tab/window you may have to click on pic to zoom in.]

If later this error becomes a significant issue, I will try to make time to investigate it deeper and get a solution or at least a workaround or alternative.

...

Interesting article where somebody has faced a similar problem and some kind of solutions are suggested: window.opener function not found if there's no break point,  https://stackoverflow.com/questions/39707399/window-opener-function-not-found-if-theres-no-break-point , Sep. 2016