dompdf - how to auto trigger print dialog in chrome browser - javascript

I want print dialog to be open after PDF is rendered in browser which is working fine in firefox by adding JavaScript mentioned here but it is not working in chrome.
I have tried to add onload event and setTimeout function still it's not working.
These scripts are working in firefox but not in chrome:
<script type="text/javascript">
try {
this.window.print();
}
</script>
<script type="text/javascript">
try {
setTimeout(function() {
this.window.print();
}, 3000);
}
</script>
<script type="text/javascript">
window.onload = function() { this.window.print(); }
</script>

It's been a while since I worked with JavaScript for PDF. I believe window is a browser object and not available in all PDF readers. Try this.print() (this at the root level being the Doc object). You can check for support in your script or use try/catch to enable better cross-reader compatibility.
Here's one way to do it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Javascript test</title>
</head>
<body>
<p>This document will trigger a print dialog.</p>
<script type="text/javascript">
try {
this.print();
}
catch(e) {
window.onload = window.print;
}
</script>
</body>
</html>
The JavaScript API implemented by the various browsers may or may not support the full API as documented by Adobe in the JavaScript for Acrobat API Reference. I have so far been unable to find a reference for other PDF viewers (such as the one bundled with Chrome).
After some testing it does seem that there is limited support by the web browsers when a PDF is rendered stand-alone (i.e. within the browser chrome) versus in a web environment (i.e. in an iframe).
Also note that Dompdf does not support embedding JavaScript into the PDF by default so you'll have to enable it in the Dompdf settings.
use Dompdf\Dompdf;
use Dompdf\Options;
$options = new Options();
$options->set('isJavascriptEnabled', true);
$dompdf = new Dompdf($options);

Opening a PDF (or any URL) in a new tab allows for (optionally) triggering the print dialog via the following function.
/**
* Opens a URL in a new tab. Optionally triggers the print dialog after the window has loaded.
*/
function openInNewTab(url: string, triggerPrintDialog: boolean = false): void {
if (url !== "") {
const newTabWindow = window.open(url, "_blank");
if (newTabWindow !== null) {
if (triggerPrintDialog) {
newTabWindow.onload = newTabWindow.print;
}
newTabWindow.focus();
}
else {
window.alert("openInNewTab() blocked by browser.");
}
}
}

Related

JavaScript function works only in Internet Explorer (in ASP.NET WebForms)

in aspx page (WebForms) I have a JavaScript function that works only in Internet Explorer and not in Edge/Chrome.
This one:
function ChoosePharmacy()
{
var result = window.showModalDialog('search_pharmacy.aspx', window,"dialogWidth:800px;dialogHeight:600px;scroll: no;")
if (result != null)
document.getElementById('hIdPharmacy').value = result;
}
This should open a pop-up window (with an aspx page inside), but because is
an old legacy application, works only in Internet Explore, and now that users have move
to Edge, has stop working.
Do someone has idea why?
Thanks a lot in advance.
Luis
From your description, I understand that you would like to know why your JS code is not working with modern browsers like Chrome or Edge.
If we refer to the document for Window.showModalDialog(), we could notice that it is deprecated and is not recommended to use on the sites.
As suggested by Elder, dialog is a replacement for window.showModalDialog().
If it is difficult to implement in your code then as an alternative, you could use the ShowModalDialog Polyfill.
You just need to add a reference to ShowModalDialog Polyfill in your code and your code will start working without any changes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://unpkg.com/showmodaldialog"></script>
<script>
function ChoosePharmacy()
{
var result = window.showModalDialog('index.html', window,"dialogWidth:300px;dialogHeight:200px;scroll: no;")
if (result != null)
document.getElementById('hIdPharmacy').value = result;
}
</script>
</head>
<body>
<h1>Example for ShowModalDialog Polyfill</h1>
<br>
<button onclick="ChoosePharmacy()">Call ChoosePharmacy Function</button>
</body>
</html>
Output in the MS Edge browser:

HTML with JS not working properly in some browsers

The code below which I found here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var desktopFallback = "https://youtube.com/watch?v=4KnNVK-udTU",
mobileFallback = "https://youtube.com/watch?v=4KnNVK-udTU",
app = "vnd.youtube://4KnNVK-udTU";
if( /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
window.location = app;
window.setTimeout(function() {
window.location = mobileFallback;
}, 25);
} else {
window.location = desktopFallback;
}
function killPopup() {
window.removeEventListener('pagehide', killPopup);
}
window.addEventListener('pagehide', killPopup);
};
</script>
</body>
</html>
Is supposed to open youtube app based on the device. If it's a mobile device's browser through which the file was opened, the video must open up in the app. The code works fine in browser like FireFox. But it is not working on chrome. The app is not being opened, instead the browser version of youtube is being opened. That implies the mobilefallback link is being called, which is not I want.
And also if clicked from somewhere it works fine. The problem is only with Chrome. I don't know if it's some kind of chrome feature...but this is not what I need. Any help?
I can use any kind of solution. Even some other way to open up links like vnd.youtube://4KnNVK-udTU this directly in app.
Sorry if this info is not enough...I'll provide whatever it takes for you to help me out. ThankYou :)

Calling js function from an iframe when user scrolls to the iframe or when the iframe is in viewport

My website provides iframe code which is put in some other websites.
For simplicity lets say my domain i.e the source of the iframe is www.abc.com and my client who uses my iframe code has domain www.xyz.com.
In my iframe website I try to access geoLocation of user using javascript.
When www.xyz.com is browsed on mobile, www.abc.com (in iframe) puts a confirmation box to allow or deny the access for geoLocation.
Now my issue is:-
I want to show the confirmation box only when the iframe is in the viewable area of the browser. And I want to do it without asking my clients to put any more js code in their website. It should all happen from my iframe source.
I tried the following, but visibilityChanged() gets fired only when we change the browser tab or minimize or maximize the browser...
Sample code. a.html
<!DOCTYPE html>
<html>
<head>
<script>
function onLoad() {
console.log('onload:', (document.hidden));
document.addEventListener("webkitvisibilitychange", visibilityChanged);
}
function visibilityChanged() {
console.log('visibilityChanged: ',arguments);
}
</script>
</head>
<body onload="onLoad()">
test
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<iframe style="border:1px solid red; width:200px;height:200px;" src="a.html"/>
</body>
</html>
The new PageVisibility API, which should be widely supported on mobile, looks much more promising:
Broad support: http://caniuse.com/#feat=pagevisibility
Spec: http://www.w3.org/TR/page-visibility/
Code snippet from the spec (above):
var timer = 0;
var PERIOD_VISIBLE = 1000;
var PERIOD_NOT_VISIBLE = 60000;
function onLoad() {
timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
if(document.addEventListener) document.addEventListener("visibilitychange", visibilityChanged);
}
function visibilityChanged() {
clearTimeout(timer);
timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
}
function checkEmail() {
// Check server for new messages
}

Drag and Drop Files from Windows Explorer To Internet Explorer

I'm doing some old school IE and trying to get drag and drop from windows explorer to IE working. I'm getting the drop events but the dataTransfer object does not contain the file name(s). getData("Text") is also null. What am I missing?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DnD</title>
<script src="scripts/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="dropstuff">drop stuff here</div>
<script>
$(function () {
var dropTarget = $("#dropstuff");
dropTarget.bind("dragenter dragover", function () {
window.event.returnValue = false;
return false;
});
dropTarget.bind("drop", function (e) {
window.event.returnValue = false;
var file = e.originalEvent.dataTransfer.getData("Url");
// file is null!
return false;
});
});
</script>
</body>
</html>
IE is really bad at supporting things.
You should use special plugin, i.e. https://github.com/blueimp/jQuery-File-Upload or http://www.plupload.com/ or you might want to find solution on Flash. But that might take some time.
I suggest you fix this issue organizational way: advice users to use modern browsers by showing warning of partial funcionality compatibility in IE.

Internet Explorer 8: Navigate to users home page

I've been using the following script for a few years now to navigate to the users home page when a button is clicked. However, with the start of IE8, this does not work as it appears "about:home" is no longer valid.
if(window.home) {
// for everything but IE:
window.home();
} else {
// for IE:
window.location = "about:home"; // IE8 will error here if the location is "about:home"
}
Is there a new way of getting Internet Explorer 8+ to navigate to the users home page? The script must be cross browser.
The URI to be navigated to when about:home is entered in the location bar is stored in the Registry under
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\AboutURLs
However, this feature seems to be disabled for IE8. The entry Home is a REG_DWORD and not a string value containing the URL of the home page. This might be related to the feature of having several home pages that can be opened in tabs.
I wasn't able to find any documentation on the meaning of the Home REG_DWORD value though but it is possible to change it to a string value. Then about:home will navigate to the URL specified in that value. However, this is most likely not a solution for you as this requires admin permissions for the registry.
I figured it out, though the resolution seems very strange to me:
Create a new CSS element:
.hpClass { behavior:url(#default#homepage) }
Create a span referencing the new CSS & creating a class name:
<span id="hp" class="hpClass"></span>
Wrap it all up checking the IE version and using the new object or the old "about:home" style:
if(window.home) {
window.home();
} else {
ieVer = parseFloat(navigator.appVersion.split("MSIE")[1]);
if(ieVer <= 7) {
window.location = "about:home";
} else {
hp.navigateHomePage();
}
}
It seems that we have to use DHTML Behaviors of Internet Explorer... I haven't found any pure JavaScript solution.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:ie>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Home Link - Test</title>
<style>
#media all {
IE\:HOMEPAGE {behavior:url(#default#homepage)}
}
</style>
<script type="text/javascript">
function goHome() { // Firefox
if (window.home) {
window.home();
}
else { // IE
if (navigator.appVersion.split("MSIE")[1] <= 7) { // IE 4-7
window.location = "about:home";
}
else { // IE 8
oHomePage.navigateHomePage();
event.returnValue = false;
}
}
}
</script>
</head>
<body>
<ie:homepage id="oHomePage" />
Home
<!-- <input type="button" value="Navigate" onclick="fnGo()"/> -->
</body>
</html>
http://msdn.microsoft.com/de-de/library/ms531398(en-us,VS.85).aspx
http://msdn.microsoft.com/de-de/library/ms531079(v=VS.85).aspx

Categories

Resources