Sorry about the odd title, I'm not sure how to phrase the question. Basically, I was wondering if it is possible open a new window and fill it with HTML from the front-end rather than code an actual route, db calls, etc. (Yep ultra lazy.) Thinking along these lines...
var html = '<!DOCTYPE html><body><h1>Y HALO THAR</h1></body>'
window.open(html);
Am I just wishing upon a star here? Is this even possible?
The first thing you need to do is make the popup have a variable -
var popup = window.open('blankPage.html');
var html = '<!DOCTYPE html><body><h1>Y HALO THAR</h1></body>';
popup.document.write(html);
Edit this answer no longer works because of security features implemented that block certain data: URIs.
See Open a new tab/window and write something to it? for working answer
There is the option to use a dataurl...
window.open('data:text/html,<!DOCTYPE html><body><h1>Y HALO THAR</h1></body>');
Data URIs are currently supported by the following web browsers:
Firefox and all browsers that use the Mozilla Foundation's Gecko rendering engine
Safari, Chrome and other WebKit-based browsers
Opera
Konqueror
Internet Explorer 8+ (with certain limitations)
The suggestion to do the following
window.open('data:text/html,<!DOCTYPE html><body><h1>Y HALO THAR</h1></body>');
no longer works on Chrome due depreciation of the 'data:' allowance.
https://developers.google.com/web/updates/2017/03/chrome-58-deprecations#remove_content-initiated_top_frame_navigations_to_data_urls
If you used this previously, your code will now open a blank window instead.
Related
I have an angular js app and for a print functionality I am opening an html page using the window.open method.
public openNewWindow(html: string, title: string) {
var popupWin = window.open('', '_blank', 'scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no, height=500, weidth=900');
popupWin.window.focus();
popupWin.document.write(html);
popupWin.document.title = title;
};
I have a button on the html page to Print. I use the onclick event to call print.
<button class="print-btn" onclick="window.print();" id="view_print"> Print</button>
This code perfectly works in Chrome, but not in IE 11. If I change the default from Edge to IE 10 the print seem to be working and opening the print dialog window. It is definitely slower than the Chrome.
I have tried adding the emulation as below (for IE 10 and 8 etc) but it still does not work.
am I missing anything here? I find a lot of articles but I have not been able to fix it.
Scripted popup windows with size and position parameters are subject to Popup blocker and IE Security zone restrictions. try
window.open('', '_blank');
Use the File>Properties menu to determine which IE Security zone a web page/domain maps to.
See any Wikipedia article side bar for a template method of formatting the current web page in a printer friendly format using media queries.
I am seeing this also, but with the following information:
under Chrome: address at bottom of page is (the correct) http://server/path/file.php?querystring
under IE11: address at bottom of page is http://server/path/{8 digit dynamic alphanumeric string}.htm
The onscreen rendering is correct, but the printed result is a 404 error.
The current work around is to use Chrome.
If you have new system, and after trying everything this is not working out,
Try setting Printer First.
Set Default Printer and your IE should start responding to
"Ctrl" + "P"
or
window.print()
There is a website that I must use at work quite a bit and the only browser it works on is Internet Explorer.
I'm presuming this is because the code is outdated/incorrect and includes javascript that only IE is able to read.
This is a problem, because I want to use Firefox or Chrome, they are much better browsers.
I believe the issue is Firefox/Chrome (hereinafter referred to as foam) not being able to recognize the following "onclick" command lines. When I press these buttons, the web page does not change as it should.
<button class="MenuButton" title="Create ICL" value="ADDICL" onclick="PageJump('ICLMain.asp?From=ICLHome')">Create ICL
So.... since this is not my website, I cannot re-write all of this code to fix it. It is a corporate owned underwriter website for creating a certain document.
There must be some sort of extension that enables Firefox/Chrome to read Javascript codes like Internet Explorer so that I can use Firefox/Chrome and still use this website.
Try to use chrome extension ie tab, https://chrome.google.com/webstore/detail/ie-tab/hehijbfgiekmjfkfjpbkbammjbdenadd?hl=es. This extension emulate The ie Explorer.
I'm also facing the same problem(Javascript broke). The solution I found is to just add https:// before the link and reload the page and everything will work fine again.
I have tried using JavaScript "AddFavorite" function in my code, but it does not work in Safari. It works in IE, I think I remember Firefox, but nothing I have tried seems to work in Safari. All I want to do is have a link on my website that people can click on and it automatically creates a bookmark in their bookmarks folder/bookmark bar.
Does this entail Applescript or something like it? Or a deeper programming language I am unaware of?
<a href="javascript:bookmarksite('Name', 'website.com')">
From the apple forums: forum-link
On the Mac side at least, Safari does not allow a website to add a
bookmark. I'm pretty sure the same behaviour is in the Windows version
as well.
I've been down this road, and what I discovered was that Safari does NOT allow bookmarks to be made with JavaScript:
Apple Forum
bytes forum
They consider it unsafe. As frustrating as this is, I get their point.
Unfortunately, most things like this tend to be browser-specific, and picky.
my JS is about level 0, but i did find this on an old article here:
One specifically for Chrome:
Add to favourites link for Google Chrome
And another on a cross-browser bookmark link:
Cross-browser bookmark/add to favorites javascript
Hope between the previous comment and these links, you get what you needed.
Chrome and Safari does not allow it for clear security reason.
You could usee a script like this:
http://www.dynamicsitesolutions.com/javascript/add-bookmark-script/
which handles many browser and has a nice fallback: show a browser customized alert with instructuion message.
Es: in chrome it says: "Ctrl+D to add as bookmark"
In IE something similar to the following would work: (MSDN)
window.external.AddFavorite(location.href, document.title);
However, this won't work in other browsers. In Firefox, I believe you can use
window.sidebar.addPanel(document.title, location.href, '');
to create a sidebar panel (not a real bookmark) but as far as I know Chrome and Safari do not allow Javascript to automatically create bookmarks. For those, I recommend giving the user the instructions to do it manually:
drag a link to their bookmarks
pressing Ctrl + D to add a bookmark
Clicking + or star icon in the toolbar
I have written a JavaScript-based print feature for a web page. It extracts HTML from a hidden div on the page, renders it into a new window and triggers the print dialog.
The option is made available over a button with an onclick="printTheThing()" event. I know that for example screen readers have some caveats with JavaScript. I am wondering whether/how many people such as blind or vision-impaired I block from using this feature.
The implementation opens a new browser window and appends to its document:
function printTheThing() {
var dispSettings = "toolbar=yes,location=no,directories=yes,menubar=yes,"
+ "scrollbars=yes,width=550,height=400",
html = $('#theDivToPrint').html(),
printWindow = window.open("", "", dispSettings),
doc = printWindow.document;
doc.open();
try {
doc.write('<html><head>');
doc.write('<title>' + title + '</title>');
doc.write('</head><body>');
doc.write(html);
doc.write('</body></html>');
} finally {
doc.close();
}
printWindow.focus();
printWindow.print();
}
Update: This is what the button looks like:
<button type="button" onclick="printTheThing()">Print the thing!</button>
In addition, I am using CSS to replace the button by an image. I have tested the button with the Firefox plug-in "Fangs". It suggests that screen-readers will perfectly read out the original button text. But Fangs does not provide any interactivity so I cannot test the printing with it.
The Chrome extension shouldn't be relied on at all. You should test stuff with NVDA, which is free. I will guess that Google fanboys will say Chrome Vox is fine. Trust me, I have been working with AT for nearly 15 years.
Anyway, I would need to see the code for the button, not the JS... The JS looks fine. Some people have trouble with knowing there is a new window, however the print dialog should grab focus versus the window
to improve accessibility by using screen readers use W3C WAI-ARIA live regions, for more info see their recommendations and FAQ.
to test you can use the following screen readers:
on Windows - JAWS, NVDA
on Linux - orca (is not working with Chromium) + advice of Florian Margaine
you can also use AChecker to test on compliance of WCAG 2.0, Section 508, Stanca Act accessibility standards.
The best way is surely to try it out yourself.
There is a Google Chrome extension allowing you this: https://chrome.google.com/webstore/detail/kgejglhpjiefppelpmljglcjbhoiplfn
The way to render a printable page is to use #media CSS directives. That way you don't need to do anything special like pop-up another window or worry about accessibility: the content is simply printed correctly (and possibly very differently from the on-screen layout, if that's what you want).
I'm curious as to how I'd get JavaScript to distinguish between two near identical pages which (as far as I can tell) have the same div's. An example of a page like this would be Google Home Page vs. Google Search Results. Is there anyway I can correctly identify which is which?
In that specific example, window.title will distinguish them. window.title isn't supported by Chrome, but document.title is. It works in Chrome, Firefox, and Opera on both Linux and Windows; Safari on Windows; IE6, IE7, and IE8 on Windows; and probably others as well.
More generally, window.location gives you the URL of the page, which is good for telling what page you're on; more on MDC. It's supported on every major browser I've ever seen, including the list above.
Since HTML5, you can edit the browser history. For example, you can change the current URL with window.history.pushState():
// pushState(state object, title, URL)
window.history.pushState({foo: "bar"}, "page 2", "bar.html");
This makes the user remain on exactly the same page, but changes the URL. This is happening on the current version of Google's homepage too, so the page is still the same.
You can retrieve the URL with window.location.