When trying to invoke a .click() of an anchor tag to auto click the url.
The code is working fine in all browsers except Internet Explorer v11.
Any help will be appreciated.
var strContent = "a,b,c\n1,2,3\n";
var HTML_APS = strContent;
var data = new Blob([HTML_APS]);
var temp_link = document.createElement('a');
temp_link.href = URL.createObjectURL(data);
temp_link.download = "report_html.htm";
temp_link.type = "text/html";
temp_link.style = "display:none";
document.body.appendChild(temp_link);
if (confirm("Press a button!") == true) {
temp_link.click();
temp_link.remove();
}
here is the fiddle.
For IE, you can use navigator.msSaveOrOpenBlob
so, cross browser, the code would be
var strContent = "a,b,c\n1,2,3\n";
var HTML_APS = strContent;
var data = new Blob([HTML_APS]);
if (confirm("Press a button!") == true) {
if (navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(data, "report_html.htm");
} else {
var temp_link = document.createElement('a');
temp_link.href = URL.createObjectURL(data);
temp_link.download = "report_html.htm";
temp_link.type = "text/html";
document.body.appendChild(temp_link);
temp_link.click();
temp_link.remove();
}
}
When used download attribute an anchor, this signifies that the browser should download the resource the anchor points to rather than navigate to it. It doesn't support IE11.
For reference click here
Per this SO answer, the 'download' attribute has not been implemented in Internet Explorer.
The download attribute is not implemented in Internet Explorer.
http://caniuse.com/download
For Internet explorer you can use the "SaveAs" command.
Related
I am leveraging on this emoji picker javascript from https://www.cssscript.com/simple-emoji-picker-text-fields-emoji-picker/
In the script, String.codePointAt is having issue working on IE.
I know IE do not support codePointAt, is there any other alternative or workaround to get it on IE?
const emojis = [0x1f600]
emojis.map(function (item) {
const emojiLi = document.createElement("li");
emojiLi.style.display = "inline-block";
emojiLi.style.paddingTop = "10px";
const emojiLink = document.createElement("a");
emojiLink.setAttribute("href", "javascript:void(0)");
emojiLink.innerHTML = String.fromCodePoint(item);
emojiLink.onmousedown = clickLink;
emojiList.appendChild(emojiLink);
});
I tried using
String.fromCharCode(item);
However it somehow corrupt the unicode translation:
screenshot
I've written code that displays a pdf blob onto the screen of an iframe, but I also want it to print. I have this working in all browsers execept for IE11. Anyone know the solution there? I read some where about execCommand, but that didn't seem to work either.
const printElem = (invoice) => {
const origiframe = document.querySelector('iframe');
if (origiframe) {
origiframe.remove();
}
const iframe = document.createElement('iframe');
iframe.src = invoice;
iframe.name = 'pdf-frame';
iframe.id = 'pdf-frame';
iframe.style.display = 'none';
iframe.style.visibility = 'hidden';
document.body.appendChild(iframe);
window.frames['pdf-frame'].print();
}
UPDATE: I should be able to use something like the following to get the print to work across all browsers, but unclear on the syntax:
window.frames['pdf-frame'].document.execCommand('print',false,null);
UPDATE2: I'm trying to use the following as well, but still no dice. Anyone have any thoughts on why the catch portion won't work in IE11?
try {
window.frames['pdf-frame'].print();
} catch(e) {
window.frames['pdf-frame'].document.execCommand('print',false,null);
}
If you try this this?
var target= document.getElementById("myFrame");
try {
target.contentWindow.document.execCommand('print', false, null);
} catch(e) {
target.contentWindow.print();
}
I'm new to HTML and Javascript. I'm trying to write a Javascript function to print the content of an (hidden) iframe in order to print documents (to the user, seemingly) without opening them.
I based the function on the example I found here: https://developer.mozilla.org/en-US/docs/Printing#Print_an_external_page_without_opening_it
Printing the content works fine but the trouble is removing the iframe from the document after the printing has finished. This is what my code looks like now.
function closePrint () {
var element = document.getElementById("printFrame");
element.parentNode.removeChild(element);
}
function setPrint () {
this.contentWindow.__container__ = this;
this.contentWindow.onbeforeunload = setTimeout(closePrint, 100);
this.contentWindow.onafterprint = setTimeout(closePrint, 100);
this.contentWindow.focus(); // Required for IE
this.contentWindow.print();
}
function printPage (sURL) {
var oHiddFrame = document.createElement("iframe");
oHiddFrame.onload = setPrint;
oHiddFrame.width = 0;
oHiddFrame.height = 0;
oHiddFrame.style.position = "fixed";
oHiddFrame.style.right = "0";
oHiddFrame.style.bottom = "0";
oHiddFrame.id = "printFrame";
oHiddFrame.src = sURL;
document.body.appendChild(oHiddFrame);
}
I changed two lines in the example from
this.contentWindow.onbeforeunload = closePrint;
this.contentWindow.onafterprint = closePrint;
to
this.contentWindow.onbeforeunload = setTimeout(closePrint, 100);
this.contentWindow.onafterprint = setTimeout(closePrint, 100);
As it didn't remove the iframes without the timeout.
This works fine in both IE11 and Chrome, but in IE compitability mode (which I think emulates IE7) it gives me an error "Not implemented" when I try to use setTimeout.
So my question is, is there another way to run the closePrint function after a timeout or some other way to remove the iframe from the document when I've printed the content? Any help is appreciated.
after printing, leave the iframe on document.body. When you need to add your next iframe, first run a check for its presence ~ if its present, remove it then (first two lines).
myfunction() {
const iframe = document.querySelector('iframe');
if (iframe) iframe.parentNode.removeChild(iframe);
const i = document.createElement('iframe');
i.style.display = 'none';
i.src = this.study.DocumentUrl;
document.body.appendChild(i);
document.querySelector('iframe').contentWindow.focus();
document.querySelector('iframe').contentWindow.print();
}
I'm trying to open 2 pages with one click of a link, and this is what I have so far:
<a onclick="download()" href="?event=thanks&dl=<?php echo $_GET['dl']; ?>"><?php echo $linkname ?></a>
and the Javascript function:
function download() {
newwindow=window.open('http://www.google.com','download','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
}
The code above works perfectly with FireFox and Safari, but it fails to open a new window with Google Chrome. Why is this? My thanks to anyone who can help.
<a> elements have a download attribute in HTML5 as explained here, with a default value of "" (an empty string).
This means that download === this.download in the onclick handler (this is the element in onevent attributes), and therefore the download attribute of the element is superior to the download property of window.
Oh, what a nightmare. Your function should not named download(). Change your function name to download1() and change your onclick to download1() too
You can use HTML5 download attribute.This attribute will tell browser that virtual link we created is aimed for download only. It will download file from links href to file with name specified as download attributes value. This feature works with Chrome.
Sample Code:
window.downloadFile = function(sUrl) {
//If in Chrome or Safari - download via virtual link click
if (window.downloadFile.isChrome || window.downloadFile.isSafari) {
//Creating new link node.
var link = document.createElement('a');
link.href = sUrl;
if (link.download !== undefined){
//Set HTML5 download attribute. This will prevent file from opening if supported.
var fileName = sUrl.substring(sUrl.lastIndexOf('/') + 1, sUrl.length);
link.download = fileName;
}
//Dispatching click event.
if (document.createEvent) {
var e = document.createEvent('MouseEvents');
e.initEvent('click' ,true ,true);
link.dispatchEvent(e);
return true;
}
}
// Force file download (whether supported by server).
var query = '?download';
window.open(sUrl + query);
}
window.downloadFile.isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
window.downloadFile.isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
So I am fairly new to Javascript (a lot of experience in PHP), but I have this basic script that checks a link that redirects to a URL to see what the image height is. If it is a certain height then it adds one to a variable, otherwise nothing. I would easily do this in PHP but the images are on other servers and not my own so it doesn't work.
Anyways, ehre is the script. Let me know if you have any tips. Works well and tested in Chrome, Safari, Opera, and IE.
<script language='JavaScript'>
window.onload = function() {
var nstar = 0, urls = [];
urls[0] = "http://optout.imiclk.com/cgi/nai_status.cgi?nocache=";
urls[1] = "http://www.adbrite.com/mb/nai_optout_check.php?nocache=";
urls[2] = "http://events.adchemy.com/visitor/auuid/nai-status?nocache=";
function getImgSize(imgSrc){
var newImg = new Image();
newImg.src = imgSrc;
return{height:newImg.height, width:newImg.width}
}
for(i=0,length=urls.length;i<length;i++){
if(getImgSize(urls[i]).height==43){nstar++;}
}
document.getElementById('tracknum').innerHTML = "<b>" + nstar + "</b>";
}
</script>
Maybe the image isn't loaded yet?
Try :
image.onload=function() {
alert('W:'+image.width+', H:'+image.height)
}