Open a "popup" without focusing it - javascript

I've been trying to open a "popup" [1] without it taking the focus automatically.
I tried to blur it, from the opener or from the popup itself unsuccessfully.
I also looked for pop-under but didn't find anything relevant on Google about both topic.
I'm using Firefox. (Well… Palemoon 24.7.1 for x64 actually)
My goal is to be able to open a bunch of tabs (with middle click for instance) and having them closing on their own a bit later.
To do so in Firefox, and afaik, you MUST use a popup (right?). But everytime I open a new tab (with middle click) it focuses on it which is very annoying.
[1] Or anything else that could match my expectations.
EDIT: NOTE: This is for personnal use. :)

First the easy one: For mouse-middle-click: In Tools->Options on the "Tabs" tab, there is an option "When I open a link in a new tab, switch to it immediately". After un-checking this option, links followed by selecting "Open in new Tab", or mouse-middle-click will open in a new tab without being focused. On the same option tab, you will also want "Open new windows in a new tab instead" checked (first checkbox).
This will work for most normal links. Links which are actually JavaScript code snipits will not work in a new tab because they rely on the code existing in the current page.
A change that I find useful in Firefox is to have the cursor change depending on what type of link it is hovering over. This will allow you to visually distinguish, at a basic level, what will happen when the link is clicked without having to look at the destination address. I originally found this at askvg. It is an addition to the file <profile directory>/chrome/userContent.css (create the directory and file if they do not exist):
/* Change mouse cursor for hyperlinks that open in a new window or tab */
:link[target="_blank"], :visited[target="_blank"],
:link[target="_new"], :visited[target="_new"] {
cursor: crosshair;
}
/* Change mouse cursor for JavaScript links */
a[href^="javascript:"] {
cursor: move;
}
/* Cursor types
default - Normal select cursor
text - Text select cursor (I bar)
vertical-text - Vertical text select cursor
progress - Working in background cursor
wait - Busy cursor
help - Help cursor
crosshair - Precision select cursor
move - Move cursor
no-drop - Unavailable cursor
not-allowed - Unavailable cursor
e-resize - Horizontal resize cursor
n-resize - Vertical resize cursor
nw-resize - Diagonal resize 1 cursor
ne-resize - Diagonal resize 2 cursor
col-resize - Column resize cursor
row-resize - Row resize cursor
*/
Beyond that, it is unclear in what context you want to do this in, or at least to what extent you are willing to go to accomplish this. Your mentioning having windows/tabs open in the background and closing on their own implies that you do not actually need the user to view the window/tab. Is it that you just want a request to have been made of some URLs? Would using XMLHttpRequest be sufficient?
You want this for yourself, so if you go the route of a Firefox extension then it is quite easy to open tabs and windows and not have them be focused. It can be done with addTab().
It would be helpful for you to describe what it is that you are overall attempting to accomplish and the context in which you are doing so.
Additional information:
Based on the additional information which you have described what you need is to write a Firefox extension which can give you complete control of popups and tabs to have them work the way you desire. For what it sounds like you desire you should see (at least) the following Mozilla documentation:
Tabbed browser (Contains explicit examples of how to open a tab (w/o selecting it) and how to do so and also select it.)
BrowserApp
addTab
closeTab
tab
Copying an example on Tabbed browser:
// Add tab (without it becoming active)
gBrowser.addTab("http://www.google.com/");
// Add tab, then make active
gBrowser.selectedTab = gBrowser.addTab("http://www.google.com/");
From Tabbed browser:
Opening a URL in the correct window/tab
There are methods available in
chrome://browser/content/utilityOverlay.js that make it easy to open
URL in tabs such as openUILinkIn and openUILink.
openUILinkIn( url, where, allowThirdPartyFixup, postData, referrerUrl
)
where:
"current" current tab (if there aren't any browser windows, then in a new window instead)
"tab" new tab (if there aren't any browser windows, then in a new window instead)
"tabshifted" same as "tab" but in background if default is to select new tabs, and vice versa
"window" new window
"save" save to disk (with no filename hint!)
Also from Tabbed browser, an example of code for an overlay extension which
will open a URL in a new tab, an existing tab, or an existing window
based on which mouse button was pressed and which hotkeys (ex: Ctrl)
are being held. The code given is for a menuitem, but will work
equally well for other XUL elements. This will only work in an overlay
of browser.xul.
XUL:
<menuitem oncommand="myExtension.foo(event)" onclick="checkForMiddleClick(this, event)" label="Click me"/>
JS:
var myExtension = {
foo: function(event) {
openUILink("http://www.example.com", event, false, true);
}
}

In the end, I think I used this technique to get more or less what I wanted to achieve:
The opened tab ("popup") would communicate with a webserver (in my case, in Python) thanks to a JavaScript loaded on it by using an addon like GreaseMonkey.
The server would then tell the popup when to close itself: Worked great!
EDIT: I just thought of an alternative way of doing it (faking it) that might or might not suit your needs (depends on your app).
Open a "popup" (new tab) with the current URL (that's where it might do the trick for you or not) then change the URL of your first page to the "popunder" you were looking for.

Related

disable keys in chrome/Mozilla with plugin

I am building a plugin using JavaScript,as part of this i have disabled all the keys but still unable to control the bellow keys , is there any way that i can block the fallowing?
New Window (Ctrl+N)
Restore Tab (Ctrl+Shift+T)
Select Next Tab (Ctrl+Tab, Ctrl+PageDown)
Select Previous Tab (Ctrl+Shift+Tab, Ctrl+PageUp)
Exit (Alt+F4, Cmd+Q)
(Alt+Tab)
i am trying with registry, is it possible to disable remote desktop when ever the plugin installed?
You could turn on kiosk mode for the window which makes it full screen and always on top so you can't go to another application.
You could also make the window transparent and position the login in the middle of the screen so it appears as if there is one window in the middle of the screen but you can't click on other areas of the screen.
To handle for Alt+F4 you can use the window.onbeforeunload event or call event.preventDefault() in the close event.
https://electron.atom.io/docs/api/browser-window/#event-close

How can I inspect disappearing element in a browser?

How can I inspect an element which disappears when my mouse moves away?
I don't know it's ID, class or anything but want to inspect it.
Solutions I have tried:
Run jQuery selector inside console $('*:contains("some text")') but didn't have any luck mainly because the element is not hidden but probably removed from the DOM tree.
Manually inspecting DOM tree for changes gives me nothing as it seems to be just too fast to notice what have changed.
SUCCESS:
I have been successful with Event breakpoints. Specifically - mousedown in my case. Just go to Sources-> Event Listener Breakpoints-> Mouse-> mousedown in Chrome. After that I clicked the element I wanted to inspect and inside Scope Variables I saw some useful directions.
(This answer only applies to Chrome Developer Tools. See update below.)
Find an element that contains the disappearing element. Right click on the element and apply "Break on... > Subtree Modifications." This will throw a debugger pause before the element disappears, which will allow you to interact with the element in a paused state.
Update Oct 22 2019: with the release of v. 70, it looks like FireFox finally supports this kind of debugging 2 3:
Update Sep 15 2020: Chrome has an "Emulate a focused page" option (you can get it from the [⌘]+[P] Command Menu, or Global Preferences) for this exact need. 5 - h/t #sulco on Twitter
An alternative method in Chrome:
Open devTools (F12).
Select the "Sources" tab.
While the element you want is displayed, press F8 (or Ctrl+/). This will break script execution and "freeze" the DOM exactly as it is displayed.
From this point, use Ctrl+Shift+C to select the element.
Open console
Type in setTimeout(()=>{debugger;},5000);
Press Enter
Now you have 5 seconds to make your element appears. Once it appeared, wait until the debugger hits. As long as you don't resume, you can play with your element and it won't disappear.
Useful tip to avoid repeating those steps above every time:
add this as a bookmarklet:
Bookmark any page
Edit this new bookmark
Replace the URL/location with: javascript:(function(){setTimeout(()=>{debugger;},5000);})();
Next time you wish to use this, just click/tap this bookmark.
Verified in 2022
Do the following:
Open the console and navigate to Elements tab
Type command + shift + P (OSX) or control + shift + P (Windows)
Type the word focused
Select Emulate a focused page from the the menu
Now clicking around in the console will not close the element.
I am using chrome on Mac there I've followed above steps but I'll try to explain a bit more:
Right click and go to inspect element.
Go to sources tab.
Then hover on the element.
Then using keyboard F8 or Command(Window) \. It will pause the screen in a static state and the element won't disappear on hover out.
In Firebug there are different solutions for this:
You can use Break On Mutate inside the HTML panel. (with this you'll also be able to find out which element it is)
You can right-click the element and choose Inspect Element with Firebug
Also you may want to follow issue 551, which asks for a way to temporarily block specific events.
Edit:
To find out which element it is you can also enable the HTML panel options Highlight Changes, Expand Changes and Scroll Changes Into View to make the element visible inside the HTML panel.
Sebastian
In my case, I used Expand recursively option on google chrome:
The steps are:
Inspect the dropdown field
Find the dynamic DOM (the purple highlight)
Right-mouse click on that dynamic DOM
Choose Expand recursively:
We can see all elements are there
Here is a demo:
Hover over the element with your mouse and press F8 (this in Chrome) to pause the script execution. The hover state will remain in visible to you.
It take you to the sources tab.
Go back to Elements tab. This time code will not disapper.
There Could be Dom element and the controller functions fighting at to refresh the session. Running the application by "Start without debugging" helped in my case.
enter image description here
you can view the elements appearing and disappearing in the inspector under elements. If you navigate to the element when it is visible you should be able to see it disappear or see its css change when it status changes.
This is possible with firebug in firefox or the built inspector in chrome.
I've written an article about debugging CSS of disappearing elements
Using hotkeys to automatically go into debugger mode with hotkeys keyboard shortcut:
Install the shortkeys extension
Click on the extension icon and chose "options":
Configure as follows:
Click "Save shortcuts" button (bottom-right)
Now, go to any page, make sure devtools is opened, and hit CTRL+SPACEBAR keys, while your inspection target element is visible.
I'm using Windows OS and this hotkeys combination is good for me and is not "taken" by any other shortcut, but of course, you can choose any other.
i had the same problem but i use Firefox it disappear as soon as i open inspect element found a solution:
open the 4 dashes(settings) go to web developer > Debugger and immediately press F8 which is the shortcut for the pause that stop the script before it kick and detect that you opened the developers tools

How to Open Multiple stand alone browser windows using JavaScript?

I have html page with 2 links like
Visit W3Schools
Visit W4Schools
I want when user clicks on one of them to open new fully powerful browser window with that link. I want user to be capable of opening more than one window from my page. I need it to work via pure JS or using jQuery. It needs to work in Safari 3 and Internet explorer 6,7,8.
How to create such thing?
You can set the target attribute as _blank.
Visit W3Schools
This will open the new page in a new window or a tab depending upon the browser setting.
Target="_blank" is invalid
in js you can do this with window.open()
window.open(URL,WidowName,Options)
You have this options
1. width=300
Use this to define the width of the new window.
height=200
Use this to define the height of the new window.
resizable=yes or no
Use this to control whether or not you want the user to be able to resize the window.
scrollbars=yes or no
This lets you decide whether or not to have scrollbars on the window.
toolbar=yes or no
Whether or not the new window should have the browser navigation bar at the top (The back, foward, stop buttons..etc.).
location=yes or no
Whether or not you wish to show the location box with the current url (The place to type http://address).
directories=yes or no
Whether or not the window should show the extra buttons. (what's cool, personal buttons, etc...).
status=yes or no
Whether or not to show the window status bar at the bottom of the window.
menubar=yes or no
Whether or not to show the menus at the top of the window (File, Edit, etc...).
copyhistory=yes or no
Whether or not to copy the old browser window's history list to the new window.
http://www.pageresource.com/jscript/jwinopen.htm
a valid jQuery and html solution is
$("document").ready(function(){
$(".blankTarget").live("click",function(){
window.open($(this).attr("href"));
return false;
});
});
You can use Some text which will prompt the browser to open a new window but this can be overriden by specific user settings/configurations in some browsers.
Beyond that, you cannot force the operating system to launch a new instance of a browser from Javascript - that would be a massive security risk!
target="_blank" is the best way to solve this as it doesn't involve javascript. Please bear in mind that this attribute is frowned upon and you should really let the user decide if they want to open the linked page in a new window or the window they are currently using. W3C agree with this and as such your code will not validate using their validation tool.
Alternatively this post describes how to implement a jQuery solution.

Making divs act like proper links

I'm using a JavaScript (jQuery) calendar where some calendar events act as links. The calendar events are divs that have onclick triggers that point the browser to the correct page.
The problem is that since the calendar event's aren't <a href=".."> links the user can't ctrl+click to open the link to a new tab or shift+click to open to a new window. I'm looking for a way to get this functionality to the calendar and it seems like my options are:
Detect whether the user has shift pressed and open to a new window or ctrl pressed and open to a new tab - I'd rather not do this because opening to a new tab will probably have to be coded separately for each browser (?) and it might override user's preferences.
Remove the onclick triggers and wrap the div content inside <a></a> that fills the entire enclosing div.
Hack the calendar library to use <a> tags instead of divs for clickable calendar events.
Is there by any chance any other method to tell the browser to consider divs as regular links? Are there any foreseeable side effects to methods #2 or #3?
I'd say your easiest/most complete solution would be to use anchors just as they are (e.g. no script required), just use CSS to do the work here, with display: block or display: inline-block and style them like <div> elements.
This way, all the native clicking behavior can be handled by the browser and the user's preferences as well as Ctrl, Shift, etc clicking is whatever the user is expecting it to do.
Find a calendar that uses proper markup, or fork the plugin and go for #3. The down side to the later is that since you're forking, you cut yourself off from upgrades

Disable redirect on drag image or link

The problem is the following:
I am using a tinymce editor (not related with the problem) and an external image manager aplication. We use the drag&drop functionality for users, to just drag the image from the image manager to the tinymce content area.
However, there is a problem when the user inadvertantly drags the image outside the content area. The browser opens the link inside the window it was dragged to, losing the form the user had in front of them.
I am wondering if there is some way to catch this link-drop event, to disable the redirect in the browser. If you want to see the problem, just have 2 windows open, and drag an image from one window to the other one.
The sollution can also be html/css if possible, not necessary to be in JS.
Use an onbeforeunload event on the body. Basically, it pops a dialog saying (you specify the string), "Are you sure you want to leave the page?". If they click Cancel, they will stay on the current page. StackOverflow itself (among other sites) uses this technique.

Categories