I am wondering if there is any way I can open Chrome console when the webpage is firstly loaded and set the viewport to a specific device (iPhone X), through a JavaScript code.
I had to do a test where I should only work on iPhone X viewport so I thought was nice if they can already see the console opened with the interested viewport active so they are going to check straight away my work instead of clicking cmd+alt+j and then set toggle device toolbar
Thanks
I don't know this to be true, but I'm guessing that might not be possible because it would infringe on the sandboxing principles that Chrome tabs are based on. You are asking for system level control of the Chrome Browser UI, and there's a lot of effort put into not letting JS code do that because of malicious intent.
You could try using Electron to build an App that does this for you, however that may still have the sandbox boundary concern.
EDIT - You may also look into the Chrome extension architecture. It allows you to implement code outside of the sandbox boundaries. I'm not entirely hopeful that this would work, but it I do know that extensions allow you to control most of interface.
Related
Summary
I'm developing an internal web application that contains the following link markup:
<a onclick="window.open('/path/to/my/new/page', 'windowname', 'fullscreen,resizable').focus(); return false;" href="/path/to/my/new/page">
Click here to open a fullscreen window.
</a>
The intent is for this to open a new full-screen window, which the user can then resize/close/move etc. However, under certain conditions the link actually opens what appears to be a kiosk-mode window (no titlebar, F11, Esc don't work to exit). To be clear, the page this link is located on is a normal user-started IE 11, Windows 7. We aren't experiencing this issue in Chrome 73, Windows 7, or Edge, Windows 10.
Additional Details
This launch link is working as intended when deployed to a development environment, whose URL looks something like https://mydevenv.local/mywebapp/ (intranet), but not when deployed to our production environment https://apps.ourproductiondomain.com/mywebapp/ (only accessible from our network). It wouldn't surprise me if our organization had site-specific settings for ourproductiondomain, but I have no clue where to start looking for a launch-in-kiosk-mode setting.
Using the IE dev tools, I edited the link and location and determined it seems to specifically launch in kiosk mode when the link is from ourproductiondomain to ourproductiondomain. Editing the link to https://google.com launches Google in regular full-screen mode as intended. Editing my markup into Google also opens my new page in regular full-screen mode as intended (with the link fully qualified to https://apps.ourproductiondomain.com/mywebapp/path/to/my/new/page).
Interestingly, changing the fullscreen to height=600,width=800 has a title bar and allows the user to control the window, but the buggy version has no address/location bar while the functional version does. Not a detail I care too much about, but it might help troubleshooting efforts.
The application is developed in ASP.NET MVC 5 but I don't think that matters since the rendered markup above is exactly the same in both deployments.
Question
Does anybody know what might be going on? If that's too broad a question, here's 2 narrow ones that I think might point me in the right direction:
How do you purposely and consistently launch a kiosk-mode window in IE 11 with JavaScript?
Where can you configure IE 11 with site-specific settings like "Make launched full-screen windows actually kiosk-mode windows"?
This sounds like a bug in IE. For security purposes, user scripts aren't supposed to be allowed to open windows in Kiosk Mode.
It does sound like there are some custom system settings in play here, although I wouldn't know where to find that setting.
A possible fix might be to explicitly specify that you want certain parts of the window frame to be visible:
window.open('/path/to/my/new/page', 'windowname', 'fullscreen,toolbar=yes,location=no,statusbar=yes,menubar=yes,scrollbars=yes,resizable=yes')
Also, I see that your original script uses .focus() directly on the newly created window. I don't think you need it, and feel like that might be what actually causes the bug in IE to be triggered.
Something that slightly bugs me about progressive web apps on the desktop is that they retain the browser chrome/frame when you "install" them/pin them to your desktop. I love that the menu bar, bookmarks, etc. are gone, since the point is to feel like a native app rather than something in my browser, but the frame feels like one last thing standing in the way of a truly native feel. For comparison, consider the "frameless window" concept from nw.js or Electron.
So is there any way, e.g. an option in the manifest.json file, to hide the frame as well?
My research indicates that the answer is currently "no", so I guess a followup question would be, has there been any discussion of it? Are there concerns preventing it, or has it just not come up at all? Any info would be great.
Edit: To be clearer, I don't mean simply launching in a separate window with its own icon, that's just what desktop installed PWAs are. I mean removing/hiding the title bar as well, with the app icon and name and the minimize/maximize/close buttons, plus the thin frame border that runs around the outside of the entire window. All this stuff:
What you're looking for is display in the manifest (see https://developer.mozilla.org/en-US/docs/Web/Manifest#display).
"display": "fullscreen" indicates you want to completely hide the browser chrome.
However, support of specific display modes varies between browsers and platforms.
For example Windows 10 (via Edge) only supports browser and standalone right now, with support for fullscreen and minimal-ui coming in Redstone 5.
Now there comes with a new mode: window-controls-overlay
see https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override#values
See YouTube intro here: https://www.youtube.com/watch?v=tj0_4pcrj7s&t=1114s
And also: https://web.dev/window-controls-overlay
Preface
First of all, I am very well aware that webapps should not fiddle with window size or position. Been through a lot of similar SO questions and forum posts.
But this is a special case, where the browser is just a platform to run an app on several specific machines in a controlled environment.
Task
The app should manage windows across several displays. (up to 5)
What I've tried until now
Searched for methods for gaining information about the host system display information, but the window.screen object only reports properties of the display the window is currently on (or considered to be on, if it is halfway on one)
Tried window.moveTo and window.open with flags "left=123,top=123" but they are always limited to the current display
Tried window.resize and window.open with flags "height=123,width=123" but just as with the moveTo they are limited to the current display.
Question
What could I do to make my application use (without manual window positioning) all the available space in a multi display environment?
Scenario
Think of it like I have two projectors correctly aligned, and would like to make it possible for:
each project to project different things (each projector projecting its own browser window)
project an app seamlessly across both projectors (possibly fullscreen)
There could/should be a window running the master window layout logic
Note
I can use any flags, app or kiosk mode, as again: we deploy the app to the target environment.
The browser options are Chrome(preferred), Chromium, and Firefox on a Windows platform (because of the special video card we will be using for 5 displays).
Fallback solution
Manually stretch a window across available displays and run the apps in iframes within this master window.
Drawback: A single process is running everything, so should an app break within a frame it breaks everything.
Afterword
Also a solution to this question would be a great help as well: Windows / Chrome / ATI / Browser fullscreen across multiple monitors
Go with a chrome/firefox extension that has access to window/tabs specific APIs.
Either embed your whole application in the extension or communicate with the extension through messages (chrome, there's an equivalent on firefox).
Support in Chrome is experimental.
You can use window.moveTo(-1000,100) to move a pop up to a second monitor in IE if you check the permission "allow script-initiated windows without size or position constraints" under Internet Options/Security/custom level.
If you only have a single monitor connected, it will move the window to the edge of the primary display. I have not found a way to do it in Chrome though, it doesn't appear to have the same security option.
Try using the chrome.windows API to interact with browser windows. You can use this API to create, modify, and rearrange windows in the browser.
https://developer.chrome.com/extensions/windows
It even works with nightwatch.
Another possible solution is to use the win32 to size & position the window.
As seen in the solution of question: Chrome Packaged App and Dual Monitors (no code there, this is just for reference)
I don't think it's possible.
Browser really limit JavaScript in its permissions for security reasons.
Maybe you can manually(in JavaScript of course) set the x and y position far outside of the screen so it appears on another screen but that's not a neat way to do it.
As far as I can think of, you have two options:
Create different pages for every screen and open them separately every time.
Create all the windows with a button and make the user drag them to the corresponding screen. When the user clicks the button open the window in full screen/kiosk mode and load the content. However I don't know what will happen if you activate another screen while your in fullscreenmode somewhere. It might invalidate and close the fullscreenmode.
This is the only way you can have distinct windows in your browsers as far as I know.
I'm a Chrome user and would be lost without Firebug, but one issue has always annoyed me. Namely, the fact that the Firebug console doesn't appear below the site you're viewing (ie the way it behaves in Firefox). Instead, the console sits above the site, obscuring the footer and content. It's a little thing but annoying all the same.
I understand that this is because of the way Google restricts Chrome extensions but is there a way around this particular issue?
I haven't found a solution anywhere. So, with some help from other stack overflow threads, I came up with a very simple function and as I couldn't find much about this, I thought I'd post it here for anyone with the issue.
I'm not a JavaScript programmer, but I do use jQuery. As such, I run this inside jQuery's ready method. Once the site has loaded, it'll check to see if Fire bug is open, if so, it simply adds a 400px bottom margin to the body. Obviously, if your console is bigger/small than that, just change the size inside the jQuery code.
It won't however change anything if you open the site and then open Firebug. It's nothing major, just open Firebug then refresh the page an it'll work.
// add body margin if firebug is open
if (console.log.toString().indexOf('apply') != -1 && navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
$('body').css('margin-bottom', '400px');
}
Hopefully this will be of use to somebody.
EDIT:
WARNING: This can possibly cause your jQuery to stop working in Internet Explorer. So, just remove this if you find that your jQuery doesn't work.
Instead of modifying your webpage's CSS code which may have adverse effects, you should just detach Firebug Lite in Chrome, then position that popup window under the resized Chrome browser window.
To perform this, just press the center button in the Firebug Lite window located at the top right corner.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image
This way, you'll have two separate areas that don't overlap yet play nicely together.
Per Stan's comment above... about what does Firebug Lite provide extra when compared to native Chrome's Developer Tools, I would have to say it provides familiarity and a great DOM Tab that Chrome lacks.
More importantly thought, you can actually use BOTH consoles at the same time.
This allows easier monitoring of two different panes and with a multi-monitor setup this can be a useful scenario. Even with a large monitor things look good.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image
I am building an application which has requirements stating that all browser features must be disabled. (It's a test taking application and they are worried about security/cheating.)
I popup a new window so that I can make it fullscreen, disable the menu bar, tool bar etc. However Firefox still has two icons remaining that I can't figure out how to disable. The 'Page' icon and the 'Bookmark' star icon are still on even when I call window.open with location=no. Here is the window.open command:
window.open("filename", "test", "fullscreen=yes,status=no,toolbar=no,location=no,menu=no,directories=no,scrollbars=yes");
Is there anything I can do about this?
From the MDC documentation for window.open():
Mozilla and Firefox users can force new windows to always render the location bar by setting dom.disable_window_open_feature.location to true in about:config or in their user.js file
In Firefox 3, dom.disable_window_open_feature.location now defaults to true, forcing the presence of the Location Bar much like in IE7.
This was done to help thwart phishing exploits. You're better off (your users are better off) leaving it enabled, even if you have control over the machines on which the browser is running.
You should really be designing your application such that knowing or bookmarking the URL won't help would-be cheaters. For instance: don't accept an answer to a question when an answer has been previously submitted.
If you don't have control of the computer the user is taking the test on, there's nothing you can do (and opening a full screen window won't prevent cheating for savvy users, either).
If you do have control over the computer or can instruct the user to install an application, you'd be best suited by building an actual application with embedded WebKit or Gecko.