Run HTML page in Windows window like exe - javascript

I have an HTML quiz (it is designed in html+css, but calculated and animated in JavaScript). Therefore, it opens in browser by default (quiz.html). I want to make it open in for example Windows window or something different. Is it possible. Or some portable browser, and set up HTML file to open by it. How?
The problem is that browser environment (bookmarks, forward, refresh buttons) is visible, and I don't want that. I want it to open in its specific environment, because it will be placed on 20 computers with different browsers etc... I can install anything on those machines. Or is it maybe possible to set up my quiz.html file to open in some other unpopular browser with no so many buttons and details?

Like said in comment, you might try to open your page in a pop.
http://www.w3schools.com/jsref/met_win_open.asp
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open
With the following code, I manage to get a popup without anything but the page and the address bar (on Firefox Potable).
window.open("http://www.w3schools.com","width=200,height=100",'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no');
You would still have the adress bar in Firefox, but this can be remove following this post:
Open new popup window without address bars in firefox & IE

If restricting your users to IE is ok then you want an HTML Application (*.HTA) which allows the hosting of HTML/Script in a standalone non-browser window which would seem to be ideal for your purposes.
MSDN ref.

Related

IE Window launched by JavaScript is accidentally in kiosk mode

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.

Intend Chrome via html a tag href

When a link is clicked on Instagram, it opens on Instagram built-in browser.
In my page, I have some links that I want they open in Chrome if a user clicks on them.
Is there any way to do it?
For example, we can intend WhatsApp via tag like this: whatsapp://send?text=${message}
I'm looking for a solutation to indent Chrome if is its support.
To my knowledge, Chrome doesn't have their own URI but only the one it uses in its own browser for settings, etc: chrome://settings. If you need Chrome for something to work properly, I'd personally suggest looking into how the Instagram browser is built and dedicate your code to it - the use of Chrome is no longer needed then and stays in the environment of Instagram.

Upload image in chrome extension and extension popup closes

I need to upload image with chrome extension, when file browser is clicked the extension popup closes. How can I handle both the file browser and popup to remain open.
It's a tricky question to answer.
The basic idea is that whenever the popup window loses focus, it is supposed to immediately close, which entails the destruction of the popup's JavaScript context (and your logic breaks as a result). This is not something you can influence.
Modal dialogs such as the file input ought to be an exception, but that doesn't work consistently across all platforms Chrome runs on. Evidence: question, bug.
Whenever you want something to survive popup closing, you normally put it in the background page. This lead to this workaround that places the File input in the background page and triggers its selection from the popup. But there's (unconfirmed) evidence that this does not work anymore. The question above has another, supposedly working answer by injecting the input tag into the current page, but that's subject to failing on "unscriptable" pages such as Chrome Web Store or internal chrome:// pages.
The safest way would be to open a separate tab or popup window to handle the process. This is obviously awkward UX though.
Not sure if you'd actually want to do this, but if you have a small app and it's not a main feat (or you've got high hopes of chrome dev's solving this issue) - as a temp solution you can ask your users to open dev tools while uploading files, popup won't close.
Though you're better off putting your logic into a separate file (eg 'background.html') and opening it from popup as a tab like this:
chrome.tabs.create({url: chrome.extension.getURL('background.html')});

Use window.open to a tab in the background (not switch focus)

I'm using the following code to open a new tab on click of a PDF download.
The problem is the new tab becomes the main tab often before the PDF loads.
How can I make the view stay on the current window (PDF) and open the new tab but not switch to it?
Note: In Chrome and Opera they understand the HTML5 download tag so the PDF simply downloads and the current window redirects - All good! So this is only a problem on IE & Firefox.
<h2 style="text-align: center;"><a href="http://cdn2.hubspot.net/hub/155045/file-847580737-pdf/Stepping_into_a_new_age_of_marketing_with_CRM_FINAL_APPROVED.pdf" onclick="casestudiesopen()" download><strong>Click here to download your eBook</strong></a></h2>
<script>
function casestudiesopen() {
window.open("http://www.workbooks.com/case-studies");
}
</script>
Well, I'll advise you to read this Stackoverflow answer, which is, in a way, quite similar to yours (the purpose anyway) :
Javascript disable switches current tab functionality in browser
JS/JQuery is indeed very powerful but also have its limits. Imagine a web page always requesting and keeping focus once you've opened it. I think you would be really annoyed, among other things.
That's why browsers prevent those kind of actions. Common browsers at least. Meaning, there's no way to prevent a browser like Firefox, Chrome, IE & Co. to focus a table since it depend of user's parameters.
You'll have to find a way to workaround your problem. I can propose this answer since it seems to have worked for the other guy.

Creating new tab / switching between Tabs in Firefox?

I am looking for a way to improve the workflow in a PHP based CMS. There is a lot of switching between the editor mode and the preview mode of the page. The editor mode is huge to load, and so I would like to open the preview mode in a different window.
I don't want to use new windows or an iframe within the current window to keep the workflow simple and to avoid confusion.
Is there a way to explicitly open a new tab (not window), and to jump to that tab from a document, in Firefox? The number of users is limited, so there is the possibility to set up the client with the necessary extensions / permissions.
I know Firefox can be forced to open all links in tabs, but I think that won't cut it, as I still can't address and focus the newly opened window.
Thanks for all the great answers everyone. I have now enough material to decide whether I'll take the greasemonkey approach, rely on the user to set up "open in tabs" and address the window by name, or use a "inline" HTML solution as so many of you suggested. I am accepting the answer that I feel went most effort into.
There is no way to force a window to open as a tab. It's all dependent on the user's preference settings.
I second the answers that say you should do this in HTML using Javascript. Then it can work in all browsers that support JS.
I would put two divs on the page and show/hide each div depending on which tab is selected. If you are clever about this you could trap the click on the tab and determine if the user left-clicked or middle-clicked. If they left click you load that tab on the page. If they middle-click you let the browser open a new tab/window (according to the user's prefs, don't try to force it), and leave the current window unchanged (that is, don't switch to the new tab). The action for clicking on the tab would be to use AJAX to load the contents of the remote document and put it into the tab. Use Javascript to modify the URL before submitting the AJAX request so that the server knows to send a web page fragment instead of the whole page.
The advantage of this dual-natured solution is that the tabbed approach will work the way you want it to work for the majority of cases, but for users with, say, two screens, or who prefer switching between browser tabs, they will still have the flexibility to work in multi-window mode. This can all be done without any browser extensions and it should work equally well in IE as well as Firefox, Opera, etc. Avoid locking yourself into one browser, even one as excellent as Firefox. One day a customer will need to use Opera or Safari and you'll be stuck.
You say you don't want to use an iframe to avoid confusion. Now I don't know about the layout of your website, but I've been using the approach that the editor opens in its own div right next to the content being edited and the content is being live updated as you edit. No need to change tabs.
(If the window is too narrow there are HTML tabs Edit and Preview)
It does not seem to add confusion to the user and for me this approach works really well. Maybe it's worth considering in your case.
What about using iframes and JavaScript?
I know you said you want to avoid 'confusion using iframes', but in my opinion if you really need to load different pages at the same time this is the best option.
In theory, you could create your own tab system using javascript or even better, using jQuery, because its UI module offers pretty cool tab control.
For every tab you could load separate "headerless-footerless" version of your specific admin page inside <iframe> element. If user wanted to modify something different, he will simply click on the tab and bring different iframe.
All this could also be done using AJAX, but iframe solution is quite easy as you just need to load ready page and all postbacks are already handled by original page and separated from master-admin-page.
You might also need to play a little bit to set correct height of your iframe to fit all the content without scrollbars, but this again, is just bit of javascript.
Nope, there's no way to force the opening of a new tab, simply because this would be unsupported by un-tabbed browsing
You can only set it to open a new window, not a new tab.
Greasemonkey springs to mind - a quick google gives open in tabs on left click. I think you could modify that so it only runs on one particular page, and you'd be up up and away.
This question made me wonder if HTML 5 allows that sort of specification, and it doesn't (nothing in one of the other hyperlink attributes, either). A new browsing context is a new browsing context, there's no way to express a preference for tab over window or foreground over background.
You can't force a tab, but if you use a target with a specific name, like target="my_cms_window", many browsers will open this as a new tab. Additionally, they will remember the name and if you use the target repeatedly, put the contents in the same tab. I have found that this works pretty well in the real world.

Categories

Resources