iOS Chrome App is printing entire page instead of an iframe - javascript

Problem
I am unable to print only the contents of my iframe in the iOS Google Chrome app. It is printing the entire screen instead of only the contents in the iframe.
I have added a snippet of code in here for reference - https://jsfiddle.net/doominer/jwhzpstk/12/
<!-- index.html -->
<html>
<body>
<iframe src="jsfiddle.net" height="200" width="300" id="frame" title="Iframe Example"></iframe>
<button onclick="print()">
Print
</button>
</body>
</html>
// script.js
function print(){
printFrame("frame")
console.log("hi")
}
function printFrame(id) {
var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
return false;
}
My iOS Google Chrome app version is 106.0.5249.92
Steps to recreate the issue:
Open https://jsfiddle.net/doominer/jwhzpstk/12/ on your iPhone's Google Chrome app (I am using iphone 11 pro; this also happens on my ipad air. )
Click on the "print" button on the screen
You should see that the entire screen gets printed instead of the iframe (this is the issue)
Try this on iPhone Safari and Safari will print the iframe instead (intended behavior)
I have also logged this in the google support site for additional support, if anyone is interested.

Related

Video tag not showing source video on chrome android

I have a .webm video that I am dynamically setting as the source for the video tag.
vidPlayer = document.getElementById("player");
vidPlayer.src = videoPath;
The corresponding HTML:
<body>
<video id="player" class="video-player"></video>
</body>
This is working perfectly on the web browser but when I view this on my mobile, I get a white screen.
I checked the elements tab in the developer tools if different HTML was getting rendered, but it wasn't.
However, in the network tab for chrome web, there is a call made to fetch the video but the same does not happen for chrome android.
I am running this code on localhost.
Can anybody tell me what I am doing wrong or why this is happening?

So, apparently, if your video does not have controls enabled, then for mobile browsers, the user must interact(tap or swipe on the screen) for the video to be visible on the screen.
With controls enabled the video is visible from the start.

Why PDF not opening in iFrame in Chrome when switched to Mobile Device Mode

This shows the pdf when we open it in browser.
<html>
<head>
</head>
<body>
<iframe src="https://static.googleusercontent.com/media/research.google.com/en//pubs/archive/44678.pdf" width="100%" height="100%" >
</iframe>
</body>
</html>
But when I switch it to mobile view, it DOESNT work.
Steps:
Open Chrome Inspect Window.
Click "Toggle Device Toolbar" icon on the top menu on inspect window toolbar.
Now we can still see the pdf in mobile view.
Once we refresh it, we can NO LONGER SEE pdf.
Why ? I need to iframe the pdf and show it in mobile app in web view.
Is it possible or not ?

JavaScript pop-up, can't change URL

So I've been experiencing several issues around pop-up windows within a corporate Intranet site, i.e. JavaScript 'window.open' the last one brought to my attention is the inability to change the URL of a pop-up once it's opened. I first tried this on Edge then Firefox to confirm.
After playing with the pop-up window options, I found that if I set 'toolbar=1' then I could change the URL in Firefox but not Edge or IE.
I was using the following code in a w3schools editor
<!DOCTYPE html>
<html>
<body>
<p>Click the button to open a new browser window.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
window.open('https://www.w3schools.com','123','width=560,height=340,toolbar=1');
}
</script>
</body>
</html>
This seems to be a Windows 7 and 10 issue on IE or Edge. Is there a new security setting somewhere that I'm missing?

PDF embed not working in IE11, but it WORKS when edit the HTML in DOM Explorer (F12 - debug tool of IE)

Here is the Fiddle link "http://jsfiddle.net/Z99gr/2/" which similar to my code, I have created a Image slider using Galleriffic. In the image slider along with images I am showing PDF embedded.
The Fiddle link and my image slider works fine in Chrome and Firefox, but in IE I its not loading. I am testing in IE 11
In IE, when I open the "DOM Explorer (F12 - debug tool of IE)" and selects the <div> which contains the <embed> tag for PDF, it show below code.
<div id="pdf">
<embed width="500" height="375" src="https://www.adobe.com/products/pdfjobready/pdfs/pdftraag.pdf" type="application/pdf">
</embed>
</div>
And when I just edit anything in this HTML TAG within the "DOM Explorer (F12 - debug tool of IE)", it loads the PDF.
This is a very weird nature of this issue.
I don't understand how to fix this issue.
Please suggest!
I am getting below results inm IE11:
Where as the results should be something like this (its a screencapture from Chrome):

I was now able to embed the PDF file IE using "<iframe>" tag.
I replaced "<object>" and "<embed>" tag with <iframe> and its working fine now with all 3 browsers, Firefox, Chrome and IE.
There are 2 ways of embedding PDF in IE.
1st way: Call PDF directly in <iframe>
Below is the updated code:
<div id="pdf">
<iframe src="https://www.adobe.com/products/pdfjobready/pdfs/pdftraag.pdf" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
<p>It appears your web browser doesn't support iframes.</p>
</iframe>
</div>
2nd way: if the browser doesn't have PDF reader the u can call an HTML in page <iframe> which contains <object> tag .
Below is the code for 2nd option
<div id="pdf">
<iframe src="pdf.html" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
<p>It appears your web browser doesn't support iframes.</p>
</iframe>
</div>
Code for "pdf.html"
<body>
<object data="lorem.pdf" type="application/pdf">
<p>It appears you don't have Adobe Reader or PDF support in this web browser. Click here to download the PDF. Or click here to install Adobe Reader.</p>
<embed src="lorem.pdf" type="application/pdf" />
</object>
</body>
This worked for me!!!
Here is the WORKING Fiddle : http://jsfiddle.net/Z99gr/9/
Hope it will be helpful for others in future!

To anyone that has this issues in the future, you have to turn off compatibility mode for intranet sites.
Tools > Compatibility View Settings > Uncheck "Display Intranet sites in Compatibility View"
Developer tools overrides the compatibility view and displays the page in IE11. Compatibility makes the page display as IE5

Found a fix that worked for me...
I was using IE11, Win7 enterprise, and latest version of adobe reader XI which I had just updated.
The website I had a problem with, was using <object></object> to do the imbedded PDF (it was a CQ5 component, if that matters).
I didn't have to modify the html -- this is what i did:
1) Go to internet options in IE
2) Go to Advanced
3) Click "Reset...". I also clicked "delete personal settings" since I mainly use IE for testing web development so there's no much there...
4) Requires computer restart, so do that.
5) When you are back in, open IE11.
6) It will prompt you if you want to use it's default settings/accelerators. I said YES (i usually always said NO to this, in the past).
7) Open site, and enjoy success.
It also fixed this example site for me, so I know something good happened.
http://acroeng.adobe.com/Test_Files/browser_tests/embedded/embed2.html
I tried doing the "TabProcGrowth" fix in the registry (some other solution i found earlier), but that didn't work either. Only resetting IE to scratch worked for me.

Solution: Install adobe acrobat reader.
It appears to me that IE uses whatever reader is installed to view embedded or natively opened PDFs, whereas chrome, edge and other modern browsers comes with a PDF viewer of sorts.

Window.location.href giving a flick in IE8

I am opening a excel file with javascript using window.location.href('URL');
It is working fine in Firefox, Safari, but in IE8 it is showing a blank screen and then a file dialog. What's the problem in IE?

Open it in an iFrame instead.
<iframe name="hiddenframe" style="display:none"></iframe>
and your JS will be:
hiddenframe.src = "myexcelfile.xlsx";

Categories

Resources