There seem te be some subtle differences in the Implementation or configuration between WBWebView and Safari (and SFSafariViewController) that renders a part of the Website I want to display unusable.
Here is what I am trying to do:
Basically all that is needed is an "App" that just opens a specific website in fullscreen mode, so no chrome, URLs or additional navigaton buttons are present. The Website works fine on Safari on iOS (and every other (modern) browser on desktop or mobile) but the menu does not when embedded in the App.
All I did was creating a new single view Application in Xcode, drop in a WKWebView and have it load the URL. The part of the page not working is this menu component that is used throughout the site: http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ So basically the user has no way to navigate. While debugging the website it seems like when I push the menu button the menu does not expand like it should because the changed css classes dont get picked up correctly. If I manually toggle the css classes on the menu-element it gets displayed correctly. It makes me wonder if there are some additonal constraints related to WKWebView?
Can anyone tell me if there are any settings or configurations I can alter that allow the website in WKWebView to behave exactly the same as it would under Safari?
As far as I understand SFSafariViewController I always get the browser toolbar and navigational elements which I dont want to have in the app, so that is not an option- or is there a way to get rid of that?
Any help or pointers would be greatly appreciated :)
Related
I'm making an app where having a UIWebView is absolutely necessary. However, I'm having a problem where the UIWebView doesn't load the mobile version of the website.
I've read some questions on StackOverflow, and they all seem to say it's up to the website to decide what type to display, and that the UIWebView acts just like Safari.
However, I have tested with 9 different links to different websites and they all load the desktop version in my UIWebView and the mobile version in Safari.
What could I do to force the UIWebView to load the mobile version just like Safari does? Are there a type of headers I could send or cookies to set or anything that actually works?
Furthermore, the desktop versions scale terribly in my UIWebView. They do allow zooming, but when I release they all (the websites) reset back to the same position. And when I try to scroll horizontally, they just snap back into the original position, which leaves the website impossible to read and my UIWebView utterly useless. If I can't force the mobile page, how can I make the desktop versions act differently?
I forgot to set the constraints for the UIWebView, which caused the content to be rendered wrongly. I don't know how that's relevant, but constraining the UIWebView seems to not only render the content correctly but also display the mobile site.
I am developing an application, where I need to open a full-screen WebView over my existing XAML page.
Now I've added a AppBar over this WebView. The requirement is that, appBar button click should navigate me to different application Page.
e.g. WebView is opened on MainPage.xaml and on clicking the AppBar button added on this webView I have to navigate to SeconsPage.XAML
I am not able to do this now and seeing an exception thrown by COntrol_webview,exe
Can I do such navigation? If Yes, pleas help me to find out what I am I missing?
Thanks in advance!!
go for a native app - it saves you a lot of trouble. Filip Skakun already described the first crazy thing about the webview (with the webviewbrush).
if not, you can use the script notification to communicate back and forth between your webapp and your store app. here's a good link: http://blogs.msdn.com/b/wsdevsol/archive/2012/10/18/nine-things-you-need-to-know-about-webview.aspx
I am trying to open a specific page of a pdf (for example, http://cb.vu/unixtoolbox.pdf#page=14) inside an iFrame. While it works on desktop browsers, it is not working on an iPad.
Also noticing that, this does not work on the iPad even without the iFrame if I want to go the page 14 by typing http://cb.vu/unixtoolbox.pdf#page=14 directly in the address bar of mobile safari.
Has any of you came across this problem? If so, how did you solve it?
Thanks a lot for any help!
Is there anyway to view the source of a web page on mobile Safari in iPad via the home screen app button? because this obviously hides the address bar etc..
No you can't view source in Mobile Safari full-stop.
EDIT
Have you checked out the remote debugging tools that are out there? Whilst you won't necessarily be abel to view full-screen web app source on the device itself, you may then be able to view the source on the control device. For example, weinre
Another solution is that if you are a developer you can install firebug light on your page .
It will make the dev. much easier ... you only have acccess to (CONSOLE - HTML - CSS - SCRIPT - DOM)
More info here :
https://getfirebug.com/firebuglite#Install
Yes you can, nitro html and WebInspector are both apps that allow you to view and in the case of nitro html edit the source html of a webpage
I am able to view the source of a web page (though it looks pretty ugly) on my iphone. I found a tip on the net. Pretty simple.
Go to any webpage
Tap add bookmark
In the name section add anything you like
In the address field add this:
javascript:(function()%7Bvar%20a=window.open('about:blank').document;a.write('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20'+location.href+'%3C/title%3E%3Cmeta%20name=%22viewport%22%20content=%22width=device-width%22%20/%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E');a.close();var%20b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))%7D)();
That is it. Now open the site you want to see the source of.
Go to bookmarks and tap the one you created. It will open the source in a new tab.
Tell me if it worked for you :)
I'm writing a web app for the iPad using HTML5 and SenchaTouch. The app uses cache manifest to function offline. Once it has been added in the home screen and opened without Safari, it will refresh itself every time it is opened, even if just navigating to the home screen and back. The desired behavior is to leave the app, do something else, and then come back to the app with everything untouched.
An example of a similar app that displays the same (undesired) behavior can be found here: http://ignitedmediadesign.com/WebApp/index.html
I've read that using a cache manifest should have solved this problem on iPhone ( http://www.stevesouders.com/blog/2011/06/28/lack-of-caching-for-iphone-home-screen-apps/ ), but doesn't seem to have done the trick for either iPhone or iPad.
Is there another way to fix this? Is there some secret to cache manifest files that stops this that I may have missed?
I'm under the impression this is simply the nature of the "home screen" web apps that operate outside of normal Safari. I have an app that operates just fine in Safari with some minimal state saving, but the blasted non-Safari version refreshes every time. EDIT: Even the showcased O’Reilly example that uses a cache manifest reloads every time when added to the home screen.
You may want to look into creating "routes" (URL fragments) that point to a controller/action pair. Look into the MVC PhoneGap example (If not using PhoneGap, you can scroll past all of that stuff and implement your own data model and store). Also see this Sencha Touch MVC tutorial.
Also, most of the rendered sencha touch components seem to maintain state between changes of the active item. For example. I have a main TabPanel that contains all sub panels. When switching between tabs on the main TabPanel's TabBar, each sub panel maintains its rendering, unless I've set a listener or controller action to do otherwise.
Hope this helps.