Cross-browser showModalDialog Replacement - javascript

So we have an internal web app that was written back in the IE6 days that we are trying to get to a state where it will work cross-browser, including mobile devices. We are using ASP.NET and the codebehind is written in VB.NET.
Unfortunately the app uses the showModalDialog function that only really works in Internet Explorer (and sort of in Firefox) all over the place. It also makes use of the window.returnValue from these popups, so what it expects is that when PopUpWindow() is called, the javascript would block on that statement and stop execution. Most calls are of the form "var a = PopUpWindow(..)". Then when the popup is closed, it would resume and set a to the returnValue and then make use of it.
It looks like these days javascript doesn't really do blocking function calls, which is making the process of finding an easy cross-browser replacement frustrating. We have a javascript file that is included on every page that contains the function that opens the popup windows. We would ideally like to replace this function in this file and have it work across the application without having to make changes on every single page where there is a popup.
Is there anything that would help with this or is there a standard way of replacing these kinds of dialog popups? We are looking at replacing them with jQuery dialogs but since we would need to use a callback function to get the returnValue it wouldn't work as a drop-in replacement. I'm getting the feeling that there is no easy way to do this (since our code relies on blocking javascript) and we will have to bite the bullet and make the changes to each page with a popup.

You can use my showModalDialog polyfill using a modal <dialog> element, which works in the latest Google Chrome. For other browsers, a <dialog> polyfill is available.

Related

Click using Javascript in Chrome

I am trying to click on page two using JS
https://www.abbreviations.com/sr
So I opened the console and put
document.getElementsByClassName('rc5')[1].click();
But it didn't click it and go to that page
This worked for me:
document.querySelectorAll(".pager > .rc5")[1].click()
what kind action you want to get as your 'click' result? first, it may be important to determine, that browser defines clicks as 'native' and 'generated by the code' and in the case of security and browsers policies.
but there is one smart method to work with DOM - headless browsers, like puppeteer.
you can do really anything with the webpage, using pure javascript.

Why is window.showModalDialog deprecated? What to use instead?

I was developing a GreaseMonkey script which used window.showModalDialog.
But before finishing it, I have discovered that Firefox 29 warns:
Use of window.showModalDialog() is deprecated. Use window.open()
instead. For more help
https://developer.mozilla.org/en-US/docs/Web/API/Window.open
But the problem is that window.open needs UniversalBrowserWrite privilege in order to open a modal window using window.open.
Then, why is window.showModalDialog deprecated? Is there any API which doesn't require privileges?
Note: I don't want a fake modal dialog (like jQuery's one), I need a real modal which pauses JavaScript execution.
Why is window.showModalDialog deprecated?
From http://tjvantoll.com/2012/05/02/showmodaldialog-what-it-is-and-why-you-should-never-use-it/,
In general the idea of putting a native dialog implementation into the
browser was a really good idea, but window.showModalDialog was a bad
implementation that is riddled with issues and poor browser support. (...)
Note that (...) [a modal dialog using showModalDialog] is a full HTML
document, not a snippet that is injected in. This is a characterizing
feature of window.showModalDialog. It’s really just two completely
separate windows communicating with each other. The fact that you have
two separate windows and DOMs means you don’t have to worry about JS &
DOM conflicts, which is appealing if you have a lot of bad JavaScript
with a cluttered global scope. But mostly this just adds unnecessary
complexity, complicates the browser implementation, and contributes to
a number of bugs. (...)
While it’s important that modal dialogs prevent the user from
interacting with the originating window, there’s no reason the user
shouldn’t be allowed to interact with other tabs or native browser
controls (back/forward, favorites, address bar, etc). (...) This is
actually a big annoyance to the end user. (...)
The debugging experience for window.showModalDialog is horrible.
(...) You're basically forced to alert like it’s 1999 to determine
what’s going on. (...)
Currently no major mobile browsers support window.showModalDialog,
so if you’re looking for any sort of tablet / mobile support you need
to stay away.
What to use instead?
HTML5 introduces the new <dialog> element, which can be used to display dialogs, including modal ones.
For example:
<dialog id="myDialog">
Foo bar
<button id="hide">Close</button>
</dialog>
<button id="show">Show Dialog</button>
var dialog = document.getElementById('myDialog');
document.getElementById('show').onclick = function() { dialog.showModal(); };
document.getElementById('hide').onclick = function() { dialog.close(); };
Demo
The problems are:
Browser support is currently negligible, but there is a polyfill.
It doesn't pause JS execution.
You can use my showModalDialog polyfill using <dialog> tag if you want to still use this solution.
Currently, if you don't want to use privileges and want to use modal window, best way is to use jQuery UI Dialog or something similar.
To block script execution, use while (true) { }. The fact that this is equivalently bad behavior to showModalDialog is part of the reason they removed showModalDialog.
Also, "modal" and "blocking script execution" are not the same thing. "Modal" simply means on top of everything else, preventing you from interacting with those things. So jQuery UI dialogs are modal, they just don't block script execution.

Webbrowser Control - Dealing with popups that use javascript

after much research I've been trying to find a code that not only captures popup links in the webbrowser for it to navigate in, but also works on javascript codes that open new windows or popups.
i tried using the webbrowser1_newwindow event with the following code (and works great)
' prevent opening a new window
e.Cancel = True
WBAccountVirgin.Navigate(e.Url.ToString)
but it doesn't work with javascript code using:
javascript:newPopup
i managed to remove the javascript code as a string and just navigate to that and also works but not every time.
So here's the question:
What code can i use that works with every sort of newwindow event or popup where i don't need to provide the url beforehand of that popup? Also that works with javascript popup codes..
I've seen that most places people offer the solution of using the NewWindow2 and NewWindow3 event but that isn't even part of the pre-loaded Webbrowser control which i am using. I don't want to use the Microsoft Webbrowser that i have to import. I want to use the WebBrowser Control which is already loaded.

How do I disable body.blur() in IE8?

I work on an enterprise web application that runs in IE8. It appears blur() is being called on the body causing the IE window to be sent to the background. Unfortunately this code is in a portion of the application that is controlled by the vendor.
Is there any possible way to prevent blur() from being called on the body without modifying the code that is actually calling body.blur()?
Since this is an enterprise application, solutions outside of changes in the application itself are acceptable; Such as changes to IE8 settings, registry, etc.
You should be able to hard code blur to a dummy method. If you can get in before it is called, just call body.blur = function() {}; (assuming body is pointing to your DOM body element).
Using jQuery you could simply block the event :
$('body').blur(function(e) { e.preventDefault(); });
If using Firefox is an option, i have two answers where i propose replacing the function using Greasemonkey.
Using javascript to create a keylistener hotkey for facebook page "like"
Greasemonkey script to replace jQuery plugin function?
If you have to use IE, you might need to change the page itself.
(I know there is Trixie and IE7pro for IE, but never used).
I had an issue when using javaScript editor:CLEditor, if I use jQuery blur() method on it, the IE window goes to the background. CLEditor has it's iframe which has its own body. When you extract that body and use body.blur(), IE browser will go to the background.
Other browsers are not showing that behavior, so it is better to use FF, or Chrome if you are experiencing this.
If you remove body.blur(), probably you would have less problems with IE than you have now, but still you could experience some minor bugs (something is not loosing focus at certain point), but I suppose you could live with it. However if blur() event is enriched with some logic, it could be problem - then find its definition and move logic to some other event that is started with the browser (onload, or ready).
document.body.blur=function(){document.body.focus()}

Window focus for a faster loading pop-up

I am very new to JavaScript. Kindly note that I am trying below issue in a shell which overrides many JavaScript functions.
I have an issue with focusing a window: on a single "click" action, I navigate to a new page which has two JavaScript methods which launch two external URLs which I don't own. For example I launch Yahoo.com and Google.com. My JS launches Yahoo.com in current window (as a page navigate) and Google.com as a pop-up. I WANT Google.com WINDOW TO BE FOCUSED irrespective of loading time of either URLs. The major issue is I cannot use the setTimeout JS function as this function's behavior is altered within the shell and is not usable.
Note: I am using a custom reusable JS function to launch external URLs and I just pass values to that method. So I don't even have access to window object. If I can somehow achieve a time delay without using setTimeout, it will be ideal case. If not, I will have to override that custom JS function, get access to the window object. Even if I have control over those window objects for external URLs, since loading times are different, setting focus to the Google window object is not always giving me the focus on Google window.
(IE6 & 7)
You cannot guarantee the behavior you want, in general; browsers will not let you.
Safari generally ignores requests to focus windows. Firefox and I think Chrome can be configured by their users (not by your code) to allow focus requests, but by default they won't.

Categories

Resources