IFRAME has a lot of problems with iPad safari - javascript

i am developing a java web application which will be browsed using iPad safari through 3G\VPN connection, i have an IFRAME its SRC is a url to a servlet that sends a pdf file to the IFRAM
<iframe src="documentviewer?docid=#{viewIncomingBean.incoming.id}" width="610px" height="5000px"></iframe>
problems with IFRAM on iPad Safari are:
1 -after calculating the time taken on server side to flush the pdf file in the output stream to the client i found that the IFRAME takes a very long time to getting rendered and the pdf file loaded on client side (please have a look Using Iframes Sparingly).
2 - on iPad Safari the IFRAME can't be scrolled using regular one finger touch style, you must use two fingers to scroll the IFRAME up and down (please have a look ipad and iframe problem).
is there is any other better way to load the pdf file in a web page ????

I had to develop a pdf viewer for an ipad site we were working on. We could not make the scroll work with other thing but the two fingers.
What we did was to use http://mozilla.github.com/pdf.js
it is a javascript renderer for pdf documents. It works great ... of course, if you dont use IE.
another solution is to use the document reader of google ... https://docs.google.com/viewer

Related

iFrame not loading properly in Chrome

I am attempting to show a simple mockup to a potential client of how he could stream media from his own online radio station to a page. The radio station was built using an external site and in Safari rendering the station's share link in an iFrame works perfectly, and plays immediately on page load without the user having to do anything. Here is the pure html code; there's no JS for this page now:
<iframe src="https://lucasdraft.out.airtime.pro/lucasdraft_a" frameborder="0"></iframe>
The CSS:
iframe {
height: 50px;
width: 200px;
float: right;
}
But in Chrome, half the time when I try to load the page the iframe doesn't show up at all and the page loads continuously with the status at bottom left displaying "Waiting for available socket"- again this never happens on Safari. When it does load in Chrome, instead of showing the basic media player from the external source it shows a sort of gray semi-circle with three dots. If I click this gray blob it begins playing, but this is very un-intuitive to a user not to mention ugly. I assume this is a security feature in Chrome but haven't found any reliable way of fixing it. Increasing the size of the iframe does not change anything.
Safari (working as expected):
Chrome loading error:
Chrome with cache cleared, after loading the iframe:
Thanks and anything helps in fixing this pesky error!
For the Waiting for available socket, a quick google search got me this answer. Chrome hangs after certain amount of data transfered - waiting for available socket It's always a good idea to google something before asking.
For the visual problem. the Url in your Iframe is calling a video. Different browsers use different style for their video player. Chrome just needs a little bit more height. I find that 100px works well.
I had the same issue(Worked in safari but not in chrome). In my case the issue was the Ad-blocker . Ad-blocker usually writes scripts to override the iframe styles.
Once I disable the ad-blocker or load the project in incognito(private browser) window the iframe content loaded successfully.

HTML flicker when above VMR9

I'm working on a web app with an ActiveX that decodes video with FFMPEG and renders the video using VMR9.
for some reason, each time I'm trying to put some HTML (even with IFrame) causes the panel to flicker.
How can I eliminate the flickering?
Maybe it is related to how I initialize the VMR9.
Thanks
Does the video play normal on your computer?
And for a webapp i recommend to decode in h.264.

Images with relative src not found in jQuery Mobile wrapped with iOS Phonegap

Issue
I have a strange issue with jQuery Mobile wrapped in Phonegap on iOS. My app consists of two pages, the second page being AJAX-loaded. On both pages I have images with a relative source like this
<img src="../images/myImage.png" />
On the first page, the image is displayed correctly. On the second page, the image is not found.
Explanation
I checked the src of both images with Weinre. It seems like Phonegap uses the data-url of the jQuery Mobile page div as prefix to the relative source. This works on page 1
file://path/to/app/html/../images/myImage.png
but not on page 2
file://path/to/app/html/page2../images/myImage.png
Why does Phonegap use the data-url on iOS?
Environment
What confuses me is that this problem only occurs in iOS Phonegap. It works fine in any browser and in Android Phonegap. It is a very basic "Hello World" like app with a standard jQuery Mobile page.
Solutions
I tried using the base tag, didn't work. I tried setting up the project again from scratch, didn't work. Any ideas?
I found the answer myself. Apparently jQuery Mobile identifies linked resources as external, if they don't have a file name suffix like ".html". My files were named without any suffixes.

Loading JS script for only iOS devices?

I have a jQuery script I'm using on a site to allow fixed position background images on iPhone/iPad/iPod. However it seems to be clashing with another script I am using on the site that enlarges background images full screen. Luckily they're independent of each other, I don't need the clashing background image script to work on iOS devices and vice versa.
Is there a way I can specifically target IOS devices to serve a JS file? I initially thought about using some kind of IF statement and doing it on window size but that started to get a bit complicated and affects other non-IOS devices. It just needs to run something like this...
..."if IOS device then load scroll.js"
I know device/browser sniffing is frowned upon but I can't think of another way around this problem.
You can use the Mobile Safari user agent string to detect mobile safari server-side, see: How do I detect Mobile Safari server side using PHP?
You can also do this in JavaScript:
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i))
See iPhone & iPod Detection Using JavaScript for more information.
You can use Detect Mobile Browser (it has a library for javascript).
you can also try this
if (navigator.userAgent.match(/like Mac OS X/i)) {
alert('Hi, you\'re browsing from an iOS device.');
}

Iframe size manipulation

Is there a way to make the Iframe request an external website as if it is a mobile device, so the content returned will have a small dimension etc?
I am displaying external websites in iframes, using width and height attributes
<iframe src="http://marketwatch.com" width="300px" height="300px" ></iframe>
but because the browser is not a mobile browser, the content returned is tailored to normal browser, and I end up having scrollbars.
If the content returned is that for a mobile device, then no more scrollbars etc.
It depends on how the website detects if it should be a mobile browser.
If the site has a mobile-specific URL you can go to that always renders the mobile site, then just go to that.
If it looks at the user-agent string and does things like that then you might not be able to do it. I think a lot will detect based on the user agent, but just redirect to a mobile version of the site though. If you know the mobile version of the site then you can just use that and it should be fine.
Of course, this requires you to know before hand what sites you want to use. Not sure if there's a generic solution.

Categories

Resources