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

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?

Related

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

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.

Website loses mobile-friendliness when loaded in frame

I have a page on my website in which I'm loading a purpose-built WIX marketing site inside a frame thusly:
<html><frameset cols='100%'><frame src='https://michael3557.wixsite.com/truckercert'></frameset></html>
On a pc/laptop, everything looks fine and as expected. But on a phone, the "mobile-friendliness" of the wix page is gone, and a super-narrow, unfriendly page displays.
Yet if you hit the wix link shown above directly (not inside a frame) on a phone's browser, it does look fine and mobile-friendly.
Why does my page lose its mobile-friendly nature just because it's loaded inside a frame? And how can I solve this?
The browser determines the viewport settings from the top-level document.
The frame HTML has no <meta> tag setting the viewport.
The page inside the frame is not the top-level document so its <meta> viewport data is ignored.

How to always display an HTML file and embed new pages inside of it?

So I created an HTML GUI for a touchscreen monitor. The browser is supposed to always stay in fullscreen. Now I want to embed another website inside my HTML, which works pretty well.
My only problem now is, that when I click through the embedded webpage, new pages open without my GUI. This is a problem because I added navigation functionality to the GUI and since it always runs in fullscreen I can't use the back and forward buttons either.
So is there a way to make Firefox always open my HTML GUI, when it opens a new page and open the requested page as embedded in my GUI?
You should provide more information about how did you embed other site in your html gui.
The solution is to use <iframe> element, then all the links inside the iframe should be open in that iframe. And if you want any other link from your GUI to be open in that iframe, just add target="name_of_the_iframe" to that element, and a attribute name="name_of_the_iframe" to the iframe (ofcourse "name_of_the_iframe" is an example).
You can try using an iframe
From w3schools: "An iframe is used to display a web page within a web page."
Take a look at this link: https://www.w3schools.com/html/html_iframe.asp

How to restrict content of an IFrame to a particular domain from the iFrame

I want to use an iFrame to display the content of another web site (not mine) but I don't want to display other sites in that iFrame. For example, if the SRC for the iFrame is www.site.com then if a visitor clicks a link in that site that opens to another website, I want to prevent it and perhaps display a blank page or redirect back to the specified site.
The site hosting the iFrame uses Apache/PHP on a VPS.
I need to be able to restrict the iFrame content to what was originally specified. If this cannot be done using iFrame what else could work?
There is a similar post that does not work this way... only works on the content page and does nothing to prevent the host iFrame from controlling the content domain.

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.