I have a web page that get "requests" from an external object imported into the page (object that I don't own). When I get a request from this external object and the browser window is minimized, I have to maximize it.
Also, if the window has more than one tab open, I need to maximize the window showing the caller tab.
How can I do that?
I need to support only ie11 so, no other browser compatibility is needed.
(I already looked for it but I found only old responses that don't work)
It's not possible. The security model prevents a website to change the browser state. Browser state as in changing the window size or bringing it to the foreground.
You could go to the dark sites of the internet and pay some money for an exploit, but you need quite some knowledge and understanding to build a working solution even with the exploit. And as soon as the exploit is public it will be fixed and your solution is worthless.
The alert function brings attention to the tab initiating it. It maximize the browser if minimized, and switch the tabs to the one that has the alert:
<html>
<head>
<script>
//This line gives you 2000 millisecond to minimize the tab or open another tab
//Then after the time elapsed, the alert will maximize the tab and show it
myVar = setTimeout(maximizeTab, 2000);
function maximizeTab()
{
alert('hello world');
}
</script>
</head>
<body>
</body>
</html>
If it is permitted you can write a webservice e.g. with Go (140 LOC) and start it on the client machine. Then request comming from the web page have to be matched to the system calls of the running OS. I do not see another solution.
Related
I just noticed that when I typed in "cnn.com" into the IE11 address bar (Windows 10), that it automatically launched the website in Edge (Chromium) instead, then rendered this bar at the top of the site in Edge.
(it also looked like if this was the only tab in IE, it auto closed IE)
I like this new behaviour to help migrate users over from IE, but sadly I could not detect how this is done code wise by CNN.
I looked in Fiddler, scanned the HTTP Headers, and the meta tags on the site... e.g.
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
and the IE only comment tags:
<!--[if lte IE 9]><meta http-equiv="refresh" content="1;url=/2.250.0/static/unsupp.html" /><![endif]-->
but I don't see anything specific that seems to be triggering this? I'd certainly like to entertain applying similar behaviour to some sites/apps that I work on.
FWIW, it also triggers (if you try it enough times) this message to remain in IE11:
https://support.microsoft.com/en-us/office/the-website-you-were-trying-to-reach-doesn-t-work-with-internet-explorer-8f5fc675-cd47-414c-9535-12821ddfc554?ui=en-us&rs=en-us&ad=us
Edge 87 installs a browser helper object called IEToEdgeBHO that performs this redirection based on a pre-provisioned site list (https://edge.microsoft.com/neededge/v1)
Inside Edge, see edge://settings/?search=Internet%20Explorer for the setting that enables/disables this feature.
Is there a way to prevent sites to know if they are visible or not?
Perhaps a command line flag? I checked here but I could not find anything suitable https://peter.sh/experiments/chromium-command-line-switches/.
I think they use the page visibility API: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
If your goal is to fool the visibility API, then inject this piece of script in the related page or frame:
await page.evaluate(`
Object.defineProperty(window.document,'hidden',{get:function(){return false;},configurable:true});
Object.defineProperty(window.document,'visibilityState',{get:function(){return 'visible';},configurable:true});
window.document.dispatchEvent(new Event('visibilitychange'));
`);
It first overwrites window.hidden to make it return false. Then, it fires the visibilitychange event to notify the document in case the page is already hidden.
Or to override the API as soon as the document is created:
await page.evaluateOnNewDocument(`
Object.defineProperty(window.document,'hidden',{get:function(){return false;},configurable:true});
Object.defineProperty(window.document,'visibilityState',{get:function(){return 'visible';},configurable:true});
`);
Page Visibility API
As per the documentation Page Visibility API comes handy when attempting to save resources and improving performance by letting a page avoid performing unnecessary tasks when the document isn't visible.
As per Page Visibility Level 2 W3C Editor's Draft:
The Page Visibility API defines a means to programmatically determine the visibility state of the top-level browsing context, and to be notified if the visibility state changes. Without knowing the visibility state of a page, web developers have been designing web pages as if they are always visible. This not only results in higher machine resource utilization, but it prevents web developers from making runtime decisions based on whether the web page is visible to the user. Designing web pages with knowledge of the page's visibility state can result in improved user experiences and power efficient sites.
With this API, web applications can choose to alter their behavior based on whether they are visible to the user or not. For example, this API can be used to scale back work when the page is no longer visible.
Visibility states
The Document of the top-level browsing context can be in either of the following visibility states:
hidden: The Document is not visible at all on any screen.
visible: The Document is at least partially visible on at least one screen.
The visibility states are reflected in the API via the VisibilityState enum as follows:
enum VisibilityState {
"hidden", "visible"
};
Extensions
This specification extends the Document interface as follows:
partial interface Document {
readonly attribute boolean hidden;
readonly attribute VisibilityState visibilityState;
attribute EventHandler onvisibilitychange;
};
An usage example
To improve the user experience and optimal CPU and power efficiency an application can autoplay a video when the application is visible, and automatically pause the playback when the application is hidden:
const videoElement = document.getElementById("videoElement");
// Autoplay the video if application is visible
if (document.visibilityState === "visible") {
videoElement.play();
}
// Handle page visibility change events
function handleVisibilityChange() {
if (document.visibilityState === "hidden") {
videoElement.pause();
} else {
videoElement.play();
}
}
document.addEventListener('visibilitychange', handleVisibilityChange);
Further, #MichaelMahemoff in this blog further states that, Multi-tab browsing being the current norm now, you can't assume the user is watching your app just because it's running and the new Page Visibility API lets your app discover if it's visible or not. You could use the API to cut down on unnecessary network activity and computation. If you are using any of the current Chrome or Chromium build you can try out in the console if the current page is hidden through document.webkitHidden. However, document.webkitVisibilityState will return a string indicating the current state, one of visible, hidden, and prerendered. A new webkitvisibilitychange event will fire when any of these changes, e.g. when the user opens you app's tab, or moves away from it.
Solution
All these interactions can be observed using the visibility.js which is a wrapper for the Page Visibility API and allows you to determine whether your web page is either visible to a user or hidden in background tab or prerendering. It also allows you to use the page visibility state in JavaScript logic and improve browser performance by disabling unnecessary timers and AJAX requests, or improve user interface experience (for example, by stopping video playback or slideshow when user switches to another browser tab).
Firefox specific solution: An alternative Firefox specific solution can be to use the Disable Page Visibility API extension for Firefox which disables the API for all pages.
Here you can find a detailed discussion on How to install extension permanently in geckodriver
Chrome specific solution: An alternative Chrome specific solution can be to use the Don't Make Me Watch extension from the Chrome Web Store.
Here you can find a detailed discussion on How to load extension within chrome driver in selenium with python
Join function works when click on join button but not working on loading page my code for the click button is
$(document).ready(function(){
setTimeout(function() {
$( "#join" ).trigger( "click" );
}, 5000);
});
The reason for your issue is rooted in how most browsers are now handling video elements auto play functionality. (chrome, Firefox,safari).
TLDR; The browsers will block auto play on any videos that have sound enabled unless the user interacts with the page via click. For this reason it works when you have joinChannel via click, it meets the criteria for a user initiated interaction with the page and so the browser allows the video to play.
This is the recommended behavior, as it ensures the user is ready to view the content. Take a look at Google Hangouts/Meet for a commercial product that implements this logic
There is another option, which is technically possible (but not recommended). You could start the video with the audio muted. The reason this isn't recommended is there is no telling if in the future browsers will block auto play functionality all together so this could break again.
I’m developing a website that will work with mobile safari in offline mode. I'm able to bookmark it to the home screen and load it from there. But, once opened from the home screen, clicking on certain links will jump out of the app and open in mobile safari – despite the fact that I preventDefault() on all link clicks!
The app binds an onclick event handler at the <body> level. Using event delegation, it catches any click on any link, looks at its href (eg 'help' or 'review'), and dynamically calls a javascript template and update the pages. The event handler calls preventDefault() on the event object – for some of the links this works, and the page is updated with the template output. However, for the links that result in a hit against the local database before outputting the results of the template, the links are opened in mobile safari.
In desktop safari, all the links work even when i’m offline – something is happening that’s mobile safari specific.
Any thoughts on why some links would work offline, but not others? None of the link URLs in question are listed in the manifest file, but they don’t (shouldn't) need to be since the link action is prevented.
a couple extra oddities:
* once I click on a a link that loads in mobile safari, even if I'm offline, those same links now work, and the templates populated with data from the db work properly. in other words: the links fail when opened from the home screen, but not from within mobile safari offline
* changing the link to remove the database hit (populating the template with a mock db result) solves the problem, and the links can be clicked in the app from the home screen.
You may want to take a look at this: https://gist.github.com/1042026
// by https://github.com/irae
(function(document,navigator,standalone) {
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode=e.target;
while (!(stop).test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
// Condidions to do this only on links to your own app
// if you want all links, use if('href' in curnode) instead.
if('href' in curnode && ( curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host) ) ) {
e.preventDefault();
location.href = curnode.href;
}
},false);
}
})(document,window.navigator,'standalone');
I got it to work, the problem was due to an unseen error in the event handler code (unrelated to stopping the link from being followed). If you bind an event handler for click events to the body tag, and call preventDefault(), then the link will not be followed and mobile safari will not open, and you can define you own logic for updating the page based on that link url.
You should be sure that you call preventDefault() before any errors could possibly occur - the problem in my case was that an error was occurring in the event handler before preventDefault() was called, but of course I couldn't see that error in the console because the link had already been followed.
Here's the code I'm using (it assumes DOM standard events and would fail in IE):
bodyOnClickHandler = function(e) {
var target = e.target;
if (target.tagName == 'A') {
e.preventDefault();
var targetUrl = target.getAttribute("href");
//show the page for targetUrl
}
}
In IE and FF, i can attach an event handler to onBeforeUnload, and by passing a string to a property of the event, the user will see a dialog asking him whether he wants to continue with the "unloading" (either closing the window or navigating away).
Safari and Chrome don't support onBeforeUnload, and onUnload seems to be too late.
Is there some way to replicate the same functionality in Safari/Chrome?
NOTE: I'm not trying to keep the user hostage. I know this is nagging and un-cool. In fact, my site goes to great lengths to let the user go freely, and have everything in its place when they come back.
However, I am hosting other sites inside IFrames, and sometimes these decide to get rid of me and take over the browser, which is what I'm trying to avoid.
Thanks!
This works perfectly for me in both Chrome and Safari:
<html><body><p>Test</p>
<script>window.onbeforeunload = function() { return "Sure?"; }</script>
</body></html>
When I try to close the window, I get the prompt.
StackOverflow itself uses onbeforeunload, and it works fine for me in Safari:
function setConfirmUnload(a){window.onbeforeunload=a?function(){return a}:null}
I checked it in chrome and it seems to be working fine using this:
<body onunload="alert('x');" onbeforeunload="test1();">
This question is covered in slightly more detail in another newer StackOverFlow question:
Setting onbeforeunload on body element in Chrome and IE using jQuery