Angular app displaying white page in iframe even with all content loaded - html

I have an ASP.NET Core 3.1 site (using Asp.NET Zero) with Angular 10, in which one page has an iframe, which displays web pages from a subdomain (old VB.NET WebForms 4.0 site):
<iframe [src]="pageUrl | safeUrl" style="height: 100%;" frameBorder="0">
<p>Your browser does not support iframes</p>
</iframe>
The pageUrl variable is changed by clicking on items in a navigation bar in the Angular app.
This architecture works quite well the first 10-15 clicks. After that, each click on a navigation item downloads the requested page (Network tab shows HTTP 200 and the actual ASPX response) but the iframe does not draw the content. The whole iframe content stays white, although loaded.
There are a few symptoms that I think are important:
If I click and do not move the mouse, I see the web request fulfilled and the page stays white until I move the mouse and trigger a redraw of the menu item by the :hover event in the CSS. It can stay white for a minute if I don't move the mouse.
When the redraw happens, there is no activity in the Network tab and is definitely triggered by the mouse movement.
This "white page" effect happens even with ASPX pages that I have visited before and were displayed properly.
If somehow I move my mouse inside the iframe without triggering the redraw, I can see the mouse cursor changing when I go over a link or another element that has different cursor in the CSS.
There is nothing custom on my menu, CSS, or JS (Angular) for this behaviour.
Google did not help and pointed to "white-flash" effect, which I do not believe is what I have. So, any suggestions will be appreciated even they are not complete solutions. This issue is preventing me from going to production.

Related

URL shown in browser while editing page source in HTML

I'm making a tutorial which involves recording my computer screen. I need to click a link that normally directs me to, say https://website.com/page. I want it to redirect me to https://website.com/another_page, which can be easily edited using Inspect Element.
However, when I click the link showing now another_page, I want the URL in browser (Firefox, Chrome) to still be https://website.com/page. Is that possible?
You could do fullscreen in which case the url wouldn't even show. I don't know if that would work with your screen recorder, but it's worth a try. You could also the edit the url directly at the top of your screen so that it shows https://website.com/page and move your keyboard focus away from it so that it appears that the url is https://website.com/page.

Display issue when an iframe is embedded inside another iframe in Chrome 33

We've noticed some very strange behaviour in Chrome 33 which isn't replicated in earlier versions or in other browsers.
As an example, if you visit http://www.fatface.com/ and click on the Lace Jumper the content is cut off once you start scrolling down.
This overlay window is an iframe and sometimes content is pulled in again into an iframe (You Tube videos/Review forms etc) Content will display fine unless there is already an embedded iframe present or if by hitting a 'Write a Review' link to pull in an embedded iframe.
Has anybody come across this issue or got an idea for a fix?

iFrames lose focus of my parent page and can't function

I'm working on Oracle WebCenter portal extension in JDeveloper 11.1.1.7 and I recently added a page link (html page) from the content repository, that redirects inside an iFrame element, an external application I have on my DataCenter (not compatible for direct integration, hence the iFrames).
My problem is, when I click on the menu to get redirected on this page, everything works fine, but when I want to use the menu or any other elements outside the iFrame, it does not function, its like my whole application have 100% focus on iFrame page.
How do I resolve this?

How to implement a browser extension that adds a sidebar to each web page?

All
I am using http://kangoextensions.com/ to create an extension for multiple browsers.
This extension needs to add a sidebar to each webpage in each tab, that allows the user to interact with my server from the web page.
What I currently have is a content script that adds an iframe to the webpage. The iframe is initially hidden, but when the user presses a button I also added, the iframe is shown.
The iframe source is my own website.
This works great for the most part, but I have an issue - when the user is constantly navigating between pages, my iframe constantly disappears and re-appears with each navigation, which is not a great user experience.
I also tried using a browser extension popup window, but this window disappears when it loses focus, so it does not fit my use case.
I am looking for a way to have a "proper" sidebar - a window that is loaded once and lives for the entire duration of the browser tab.
If anyone knows of a way to achieve this, I would really appreciate it. Ideally - a solution that works on all browsers, but if you know of a way that will work only on some browsers, that's good too.
Thanks
Amir
Kango does not support sidebars at the moment.
The best you can manage is a popup.

chrome - hidden div around iframe with PHP inside

this ones really stumped me
basically, i have a hidden div (hidden tab content) around an iframe which is meant to load a PHP file manager (KCfinder):
<div id="contentfilemanager" style="display:none;">
<iframe id="filemanager" src="scripts/kcfinder/browse.php"></iframe>
</div>
but when i go to load the page in Chrome, it keeps loading for ever, and the page is effectively frozen. it displays the entire page, but nothing is clickable.
this does not happen in any other browser i have tried (firefox, ie9). and even weirder, when i go to load a non PHP page, it loads fine.
is it possible that this a problem with the page within the iframe?