I am seeing problem happen only on iOS 6 but working fine on below iOS 6 version.
My app is loading image from a link which need to enlarge its image pixels to populate within size of UIWebView by using Javascript. The link image is originally in pixels 140x24.
I see it is running over the line, but the image not being scaled up using iOS 6 simulator. It does work in iOS 5 simulator. Please help.
(void)webViewDidFinishLoad:(UIWebView *)webView {
[webView stringByEvaluatingJavaScriptFromString:#"document.getElementsByTagName(\"img\")(0).height=\"30\";document.getElementsByTagName(\"img\")(0).width=\"280\";"];
}
The syntax in javascript to get the n-th element of an array is using square braces, not parentheses. So use document.getElementsByTagName("img")[0] not document.getElementsByTagName("img")(0).
Not sure why it was working in iOS5, WebKit is probably more strict in iOS6…
Additional tip: to debug javascript errors on iOS6, a new feature makes it very simple:
Go to the "Settings" application in your iPhone, enter the "Safari" settings and tap on "Advanced" at the bottom, then enable the "WebKit Inspector" from there
Display your page to be debugged on the screen (i.e. launch your app and go to your screen that contains the WebView to make it visible)
Plug your iPhone to your Mac via your USB cable
Open Safari.app on your Mac, go to the "Development" menu (1), select the menu item with the name of your iPhone and select your application in the submenu.
You will then be able to debug your web page presented in your iPhone using the powerful Web Inspector from your Mac, and can look into the javascript console, the DOM tree, etc.
(1) If you don't have the "Development" menu in Safari on your Mac, you can enable it in the "Advanced" preferences tab of the Safari application.
Related
I'm using Crosswalk webview on Cordova to display a webApp made with Ember.js.
In some pages the app have iframes which open a Vimeo player, and I allow them to play in fullscreen.
When the user plays it, it enters fullscreen automatically, resizing the page to increase its height. But, if the user closes fullscreen (or when the video ends and the fullscreen closes), the page isn't resized back to the original height, and my top menu gets hidden behind the mobile status bar.
If then I navigate to another url, the page gets resized and everything is beautiful again.
My question is: is there any javascript/CSS trick I could try to get around this?
INFO: I tested this against 2 phones, one Android 4.1 and the other Android 5.0, and it only happened in the Android 5.0 one. So maybe this is a Crosswalk bug. Doesn't happen at all if I use the native webView, but I wanted to avoid switching to it.
Any help appreciated ;)
Hi Im developing an application where firefox needs to be kiosk mode on browser start. I got it working on all platforms except mac 10.10 ?
Im compiling mozilla source with "fullscreen" in browser.xul and rkiosk addon and
Using obective-c code to hide dock and top menubar and then start firefox.. Works like charm in all macs but 10.10. In 10.10 it leaves the dockarea and top menu area uncovered.
Any ideas where i can tweak the mozilla source ?
Where does mozilla calculate height and width when it starts ?
Can I tweak the fullscreen api to allow fullscreen from js code rather than on user click ? document.documentElement.mozRequestFullScreen -- this doesnt work unless a user initiates an event.
I'm developing a mobile web application on Windows Phone.
I chose Cordova as my platform for developing a native app using a WebView.
My problem is that when I'm scrolling to the top/bottom of the page and pull it. Internet Explorer shows what's behind the page : a white background.
Though Internet Explorer has the same behavior when displaying web pages, I would like to know if there is any way (using HTML, CSS or JS) to change this color or simply prevent the browser from showing it.
I have an application which is running on Safari in IPad(IOS 7) . When i click on one of the button it is showing some JS error. Where exactly i need to into for the script error console? I don't see any error console in safari when it is running on IPad.
Get a Mac computer
Open Safari on Mac
Enable the Develop menu https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
Using a cable, connect your iPad to the Mac
On the iPad enable Web Inspector. Settings > Safari > Advanced (scroll down to the bottom to see it) > Web Inspector (set to On)
On the iPad open the Web application
On the Mac open the Develop menu. When it drops down, you will see your iPad shown in the menu as a separate menu item. That menu item should have a submenu showing Web pages/applications currently opened on your iPad. Choose your Web application.
You get your application in the Development Console, so do whatever you can (Safari Development tools are pretty weird, but, still, better something than nothing :) )
Actually you can see the console on Mac's Safari when your iPad is connected to it.
The in-app UIWebView is limited in iOS. If I'm seeking to take advantage of features inaccessible by UIWebView on my website, how can I force a link to open a page in iOS Safari instead?
For example, assume my web page includes the following:
Open in Safari
If someone is browsing this page in another app (let's say Google Chrome or Twitter for iOS), how can I force Safari to open this link instead?
Here's a JSFiddle to demonstrate the native behavior, and communicate the desired behavior:
http://jsfiddle.net/gXLjF/
Open this from iOS Google Chrome (or any other non-Safari iOS browser) to see for yourself:
http://jsfiddle.net/gXLjF/embedded/result/
I've seen many questions here from the app developer's perspective, but how about from the web site's perspective. Is there a proper target attribute to trigger this action? Or a JavaScript function to force this behavior?