que app uiwebview iphone

uiwebview - app - webview swift 4



iPhone UIWebView recursos locales usando Javascript y manejo onorientationChange (5)

Descubrí que iOS 4.2 no es compatible con la propiedad window.orientation en UIWebView, mientras que en el safari móvil funciona ... Entonces, la única forma que encontré para hacer que mi JS reaccionara a los cambios de orientación era hacer que mi objetivo-c código llamar a una función javascript definida en la página web UIWebView que se muestra actualmente. Aquí hay un código de ejemplo, que invalida el método didRotateFromInterfaceOrientation de ViewController:

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { [webView stringByEvaluatingJavaScriptFromString: [NSString stringWithFormat:@"didRotateTo(''%@'')", [self currentOrientationAsString]]]; } - (NSString*) currentOrientationAsString { switch([[UIDevice currentDevice] orientation]) { case UIDeviceOrientationLandscapeLeft: case UIDeviceOrientationLandscapeRight: return @"landscape"; } return @"portrait"; // assuming portrait is default }

Tienes que definir tu función de Javascript de la siguiente manera:

function didRotateTo(ori) { if (ori=="portrait") { // ... do something } else { // ... do something else } }

¡Disfrutar! :)

Estoy tratando de proporcionar contenido HTML Javascript y CSS desde los recursos locales de una aplicación de iPhone, y estoy teniendo problemas para manejar los eventos de cambio de orientación e incluir Javascript externo.

Parece que puedo enlazar correctamente en CSS pero no en javascript. Estoy tratando de usar el siguiente ejemplo de manejo de Cambio de Orientación ( Cómo construir un sitio web de iPhone ) pero estoy sirviendo la página web desde el mainBundle de NSBundle de mi aplicación.

Intenté adjuntar una función javascript a body.onorientationchange y a window.onorientationchange, pero ninguno funciona cuando se sirve desde UIWebView localmente (o de forma remota), pero funciona si estoy usando el iPhone Safari.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>How to build an iPhone website</title> <meta name="author" content="will" /> <meta name="copyright" content="copyright 2008 www.engageinteractive.co.uk" /> <meta name="description" content="Welcome to engege interactive on the iPhone!" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> <link rel="apple-touch-icon" href="images/template/engage.png"/> <style type="text/css"> @import url("iphone.css"); </style> <!-- <script type="text/javascript" src="orientation.js"></script> --> <script type="text/javascript"> function updateOrientation(){ try { var contentType = "show_normal"; switch(window.orientation){ case 0: contentType = "show_normal"; break; case -90: contentType = "show_right"; break; case 90: contentType = "show_left"; break; case 180: contentType = "show_flipped"; break; } document.getElementById("page_wrapper").setAttribute("class", contentType); //alert(''ORIENTATION: '' + contentType); } catch(e) { alert(''ERROR:'' + e.message); } } window.onload = function initialLoad(){ try { loaded(); updateOrientation(); } catch(e) { alert(''ERROR:'' + e.message); } } function loaded() { document.getElementById("page_wrapper").style.visibility = "visible"; } </script> </head> <body onorientationchange="updateOrientation();"> <div id="page_wrapper"> <h1>Engage Interactive</h1> <div id="content_left"> <p>You are now holding your phone to the left</p> </div> <div id="content_right"> <p>You are now holding your phone to the right</p> </div> <div id="content_normal"> <p>You are now holding your phone upright</p> </div> <div id="content_flipped"> <p>This doesn''t work yet, but there is a chance apple will enable it at some point, so I''ve put it in anyway. You would be holding your phone upside down if it did work.</p> </div> </div> </body> </html>

Es mejor usar

  • (void) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) fromInterfaceOrientation

ya que el safari en realidad está llamando a orientación Cambiar después de que la vista haya girado.

Esto fue importante para mí porque necesitaba cambiar el tamaño de mis lienzos HTML5 DESPUÉS de que la página hubiera girado y supiera lo grande que era su contenedor.

La respuesta se puede rastrear a partir de la advertencia que recibí en XCode:

advertencia: no hay una regla para procesar el archivo ''$ (PROJECT_DIR) /html/orientation.js'' de tipo sourcecode.javascript para la arquitectura i386

Configuración de XCode * .js javascript ya que algún tipo de código fuente debía compilarse en la aplicación cuando quería incluirlo como un recurso, así que lo resolví haciendo dos cosas.

  1. Seleccione el archivo .js y, en la vista "Detalle", deseleccione la columna de bullseye que indica que está compilado el código.
  2. En la vista "Grupos y archivos", expanda el árbol "Objetivos" y expanda la aplicación, luego vaya a "Copiar los recursos del paquete" y arrastre los archivos * .js

Los foros de desarrollo de Apple tienen una solución publicada:

Parece que estás recibiendo poco por la característica "Xcode cree que .js son cosas para compilar". Básicamente, Xcode piensa que el script debe ejecutarse o compilarse de alguna manera, por lo que lo marca como parte del código fuente. El código fuente, por supuesto, no se copia en los recursos.

Por lo tanto, debe hacer dos cosas: seleccione el archivo .js en su proyecto y desactive la casilla de verificación que indica que está compilado (la columna "bullseye"). Si no hace esto, recibirá una advertencia en su registro de compilación sobre la imposibilidad de compilar el archivo (que debería ser su primera advertencia; siempre intente descubrir y corregir todas las advertencias que aparezcan en su compilación). ).

Luego arrástrelo y suéltelo en "Copiar los recursos del paquete" del objetivo.

Una respuesta a su segundo problema del controlador onorientationchange que no se llama en UIWebView:

Noté que la propiedad window.orientation no funciona correctamente y que no se llama al controlador window.onorientationchange. La mayoría de las aplicaciones sufren este problema. Esto se puede solucionar configurando la propiedad window.orientation y llamando a window.onorientationchange en el método willRotateToInterfaceOrientation del controlador de vista que contiene su UIWebView:

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration { switch (toInterfaceOrientation) { case UIDeviceOrientationPortrait: [webView stringByEvaluatingJavaScriptFromString:@"window.__defineGetter__(''orientation'',function(){return 0;});window.onorientationchange();"]; break; case UIDeviceOrientationLandscapeLeft: [webView stringByEvaluatingJavaScriptFromString:@"window.__defineGetter__(''orientation'',function(){return 90;});window.onorientationchange();"]; break; case UIDeviceOrientationLandscapeRight: [webView stringByEvaluatingJavaScriptFromString:@"window.__defineGetter__(''orientation'',function(){return -90;});window.onorientationchange();"]; break; case UIDeviceOrientationPortraitUpsideDown: [webView stringByEvaluatingJavaScriptFromString:@"window.__defineGetter__(''orientation'',function(){return 180;});window.onorientationchange();"]; break; default: break; } }