I loaded the Like Box iframe code generated on Facebook into an UIWebView on my iPhone App. It works well, but when I scroll, it scrolls the UIWebView itself, and not the content inside the iframe. How can I block the UIWebView from scrolling (i.e the UIWebView takes the fullscreen frame) and allow the overflowed content of the iframe to scroll instead ?
ps : I tested a simple .html in MobileSafari.app and I have the same problem
You use two fingers in the like box instead of one. Then it scrolls.
You won't have much control over a plugin that is rendered as an iframe due to cross domain restrictions and they do not give many options to customize the appearance.
You could replace it with a Facebook like button. Then below it, you could add code that reads and displays the Fan Page feed using the graph api's page's feed connection (/pageId/feed). This would give you full control over the rendering and still gives the user the option to like your page. To improve performance of this solution you could use the Facebook real-time updates API to get notified when new updates get posted to the page and then you could pull those down and cache them.
Related
Iframe automatically goes full screen using Ionic 3.9.2 on iOS.
I've tried removing all the fullscreen tags. I notice that it is not happening anywhere else. Only happens on iOS. On other devices, I have to manually make it full screen.
Why does Iframe automatically go full screen on iOS?
<iframe src="https://d1mlukbqb3dh9w.cloudfront.net/PortraitCourse/Module01/Module01Section1/story.html" height="655" width="100%"></iframe>
A while ago I would have been able to provide you with a spot-on answer. Unfortunately I no longer have access to the resources I would need to do so... meaning my answer won't be a complete solution.
IFRAME, on iOS, works slightly differently than on Android. Getting an IFRAME to take only the height you want is not simply a matter of setting the HEIGHT property on the tag as the rendering engine works differently. You'll have to play around with CSS both in the container of the tag and in the contents of the body itself.
Try proceeding as follows:
prepare a mock target page that doesn't take all the height, make
its background red and see how much space it takes
make the mock page longer than the height of the screen by adding lots of text and images to it and observe the change
wrap the IFRAME in a DIV and set the style=height: xxx of the div, as well as its overflow.
wrap the contents of the mock page in a div, setting its height, overflow, position and display style
properties to control its appearance.
repeat step (4) with both the HTML and BODY tags of the mock page.
Playing with these in real-time using Safari to alter their values will prove most useful. It was to me at least, when I had the problem over an year ago.
I'm trying to embed our page on a clients site, it works great in a browser and our media queries do a great job, but when inside an ifarme on an idevice, the embedded page doesn't act responsively and displays in the biggest media query size (>870px wide) and it looks really small...
Any idea why this ahppens or how to fix it?
We learned it the hard way.
inside iFrame,
the media query is not aware of the parent window screen size
in some browsers, the iFrame actual height/width will be more than the CSS width/height shown in the parent page
In short, media query is not fully compatible with iFrames.
We resorted to implementing our own media query like behaviour through javascript.
In summary it is like below,
the parent page loads iFrame [in a popup in our case, after user clicks a link]
the iFrame sets up onmessage event listener
the parent page initiates postMessage to iFrame
the iFrame receives parent window width, height from parent page and any other necessary info
the iFrame manually re-adjusts the layout through javascript
Hope this helps.
I have a native iOS app that contains a tab bar. The view controller for each tab contains a UIWebView. When the user switches between tabs, I load the HTML in the corresponding web view. The HTML is fully cached on a device. Here is how I feed the HTML to UIWebView:
[self.webView loadHTMLString:htmlString baseURL:baseUrl];
baseUrl is a file URL pointing to a directory where all assets are located.
This works great in online and offline modes, however it takes time for the UIWebView to parse and render the HTML. As a result, the user sees a brief blink of a white background when switching between tabs. I'd like to remove it, because the user is able to tell that the UI is not native (native UI renders instantly).
I was thinking about taking a screenshot of the UIWebView once it's done rendering the HTML and caching it in memory. The next time the user navigates to that web view, the app displays the screenshot while the UIWebView is rendering the HTML in the background. Finally, the app swaps the screen shot with the actual UIWebView and takes a new screenshot. This is similar to how Google Chrome app works.
Does anyone know a better solution to this problem?
Depends on how you present that web view. I'm not really sure from your description how you do it, but since you're talking about a blink of white background, I'm going to assume there is a situation where you have a web view with a loaded html and then you switch it to another html. The solution for that case would be:
create a second web view,
load the new html to this new web view,
when that web view finishes loading html (you can find out if you use UIWebViewDelegate) you can then quickly switch it with your old web view (meaning you finally add the new web view to the view hierarchy at THIS point, not when you created it).
This way you'll have an instant switch between old and new html, however user will be left waiting and it is your decision what to do with it. You could use UIActivityIndicatorView for example.
When webViewDidFinishLoad: gets called you can do any number of things, make the webview visible, remove something that you had on top of the webview etc...
My upcoming mobile web project requires viewing dynamically chosen pdf files inside the webpage. I am using iFrame to display the pdf file and the file can be scrolled using two-finger scrolling. But the problems I am facing are:
The first page of the file is not displayed completely on the iPad and gets cut off along the width unlike when I view it on the desktop browsers where the first page of the pdf is always entirely displayed although zoomed out to fit in the iFrame area.
There is no visual indication for the users that the pdf document can be scrolled, i.e., there is no scroll bar on the pdf document.
The controls (page navigation, zoom etc.) for the pdf viewer (Adobe reader) don't appear on the document unlike when I see it on the desktop browsers.
What is the best way to achieve what I am trying to do? Do any of you experts know any solutions/workarounds to the problems I am facing? An entirely different approach using anything other than iFrame can also be considered.
The reason why the pdf should be inside the html page is that, the list of pdf files will be on a menu bar on the left side of the page and the user can click on any of them to view on the same page. Ideally, they will have the capability to toggle between full screen view and that view.
Any help is appreciated.
I created a tiny JavaScript module that helps you to show a PDF inline and be able to scroll it. But I also couldn't figure out a way to make it fit the total width of the parent container.
Check it out: https://github.com/williamrjribeiro/ipdf-scroll
Cheers.
I came across this Recommended way to embed PDF in HTML? while researching on the web to find an answer.
The mentioned link discusses about some options that I can use and the google document viewer works for me though don't know if there is anything (like data limit) I need to be aware of before using it on the website. Also I have no idea if it is a good solution (though the full screen mode is not available, but zoom-in/zoom-out and next/prev page buttons are there are show up in the mobile safari on the iPad) to use for an web app that will be run on the iPad.
Anyway, I will keep researching for a better solution and if i don't find any, I'll stick to the google document viewer.
The issue appears to be a bug with Safari on the IPad.
I didn't find a solution for embedding the pdf in html but I did find this:
If you return FileStreamResult from your controller action instead of a view, the pdf will open in a new tab, it's not embedded html but at least your user is not having to download files and open them manually.
I had the same problem of the pdf not being displayed completely. The only thing I found to fix this was the change the size of the div containing the pdf.
For example if the element containing the pdf is a div then I change its width to any value and the rollback to the value it had before. Changing Width or height any one works.
Sometimes I had to wait a little using a setTimeout before calling my resizable method
I'm making a mobile HTML5 app. I've disabled scrolling (and enabled it on certain parts) and it's all good and well, but the problem starts when I embed a Youtube video through an iFrame. It seems that when a user presses an iframe, the whole page scrolls and I can't seem to find a way around this. Adding event listeners does not work.
You really can't control what happens in the iframe.
But if you want to be a little clever you can put elements directly over the iframe, like a div or transparent canvas or whatever you want, that will catch all of the events so that the user simply cannot press the iframe.
Not the most ideal, it means users cant press the buttons on the youtube video, but its probably your only real option.