如何从远程页面访问phonegap API

我不得不采取以下的情况:我有一个已经存在的远程网页,我想开发一个使用这个页面的应用程序。 到现在为止还挺好。 当我启动应用程序本地index.html被加载,并redirect( window.open target: _self )到外部网站。 这个网站是在phonegap webview中打开的。 在外部网站上,我添加了cordova.js以访问本地phonegap API。 但它不能正常工作。 deviceReady事件被正确触发,但我无法访问phonegap API,例如navigator.camera。

我怎样才能做到这一点,以获得访问API?

请不要评论它将被AppStore等拒绝。

感谢您的帮助!

Solutions Collecting From Web of "如何从远程页面访问phonegap API"

那么,对我来说,解决scheme是几个来源的混合物,但大部分的解决scheme都在这里find。

你应该做的是以下几点:

  1. 定义你的config.xml直接指向远程的index.html

     <content src="http://your-remote-location/index.html" /> 
  2. 在您的index.html任何引用本地android设备资源prepend与像**injection**一些独特的前缀。 比如对于cordova.js你会得到如下的东西:

     <script type="text/javascript" src="**injection**www/cordova.js"></script> 
  3. 在以下位置findSystemWebViewClient.java your-project-location\platforms\android\CordovaLib\src\org\apache\cordova\engine

  4. 在顶部的类的私有成员部分中添加以下枚举声明:

     private enum WebExtension { PNG, MP3, MP4, TTF, SVG, JS, ICO, HTML, CSS, EOT, WOFF, JSON; } 
  5. findshouldInterceptRequest方法并在try { line:

     if(url != null && url.contains(INJECTION_TOKEN)) { String assetPath = url.substring(url.indexOf(INJECTION_TOKEN) + INJECTION_TOKEN.length(), url.length()); try { String mimeType = "text/plain"; String ext = assetPath.substring(assetPath.lastIndexOf(".") + 1, assetPath.length()); WebExtension extension = WebExtension.valueOf(ext.toUpperCase()); switch(extension) { case PNG: mimeType = "image/png"; break; case MP3: mimeType = "audio/mpeg"; break; case MP4: mimeType = "video/mp4"; break; case TTF: mimeType = "application/x-font-ttf"; break; case SVG: mimeType = "image/svg+xml"; break; case JS: mimeType = "application/javascript"; break; case ICO: mimeType = "image/x-icon"; break; case HTML: mimeType = "text/html"; break; case CSS: mimeType = "text/css"; break; case EOT: mimeType = "application/vnd.ms-fontobject"; break; case WOFF: mimeType = "application/x-font-woff"; break; case JSON: mimeType = "application/json"; break; } WebResourceResponse response = new WebResourceResponse( mimeType, "UTF-8", parentEngine.webView.getContext().getAssets().open(assetPath) ); return response; } catch (IOException e) { e.printStackTrace(); // Failed to load asset file } } 

所有这些的结果将是截取每个资源请求,并且如果它将包含**injection**string,它将削减资源位置,并将从运行应用程序的本地设备位置请求它。 mimeType是通过应用程序浏览器正确加载资源所必需的。

希望它可以帮助别人。

在远程站点中包含cordova.js脚本将会非常棘手,因为每个平台都有一个不同的cordova.js。 您可以修改服务器,使其基于用户代理返回正确的cordova.js,但这也很棘手,因为当您从移动浏览器查看网站时,它将包含此脚本,并且这是不受欢迎的,因为javascript错误可能是向用户显示。 从台式计算机查看网站时,同样的故事不应包含cordova.js。

在我看来,你有一个本地网页(包括cordova脚本),从那里你改变到远程页面(也包括脚本)。 我不确定这个页面变化是否会起作用。 如果有效,则可能需要等待第二个设备准备就绪事件。

但是,您可以将远程站点页面设置为cordova应用程序的根页面,不需要中间的“loader”页面。 只需在config.xml文件中设置它:

 <content src="http://your.website.fake/index.html" /> 

您需要确保您允许在应用程序中加载您的网站。 在这个文件中,你应该添加:

 <access origin="http://your.website.fake" subdomains="true"/> 

我也有这个问题,改变config.xml(内容和访问标签)中的东西不起作用。 我在电话上运行时检查了应用程序,发现当我加载远程站点时,有一些文件丢失。

首先,它是一个名为cordova_plugins.js的文件,您可以在平台文件夹中find每个平台的文件。 然后你还需要一些插件特定的文件。 你可以通过构build并从中提取它们来find它们。 对于android的path如下APK / assets / www / plugins。 只需复制您的服务器上的内容,你很好去。

注意 :你也可以在平台文件夹中find插件特定的文件,但是它们是不完整的,因为它们缺less了cordova.define(“…在开始,这导致需要模块未定义,所以只要做一个构build并从那里得到他们。

这个插件解决了这个问题,而不必自己编写一个android解决scheme。

https://www.npmjs.com/package/cordova-plugin-remote-injection

https://github.com/TruckMovers/cordova-plugin-remote-injection

远程注入插件允许远程站点在Cordova应用程序中加载时与Cordova的JavaScript API进行交互。

  • 注入cordova并将安装的插件JS插入到webview的任何远程浏览页面,允许他们作为打包的cordova应用程序访问cordova对象及其插件。

  • 支持iOS和Android平台。

我testing了它,它工作得很好。 唯一需要记住的是你需要等待cordova准备好,像这样:

 <html> <head> </head> <body> <script> document.addEventListener("deviceready", function() { document.write("Now you can use plugins"); }, false); </script> </body> </html> 

这是Cordova / PhoneGap强加的限制:

  if (startFilePath == nil) { loadErr = [NSString stringWithFormat:@"ERROR: Start Page at '%@/%@' was not found.", self.wwwFolderName, self.startPage]; NSLog(@"%@", loadErr); self.loadFromString = YES; appURL = nil; } 

我过去禁用了这个检查,让cordova使用非本地文件地址。

我一直在为phoneGap快速debugging工作了很长时间,但是找不到与应用程序(不在远程位置)上的cordova.js一起使API工作的方法。

我不知道为什么这不起作用。 如果你知道内部工作,我期待着听到它…

我试过的最后一件事情是在主html中放置100%100%的iframe,并在同一文档中加载本地的cordova.js。 然后,我可以使用API​​,但在iOS上有一些缩放问题,这是另一个问题…

我不记得我已经实现并确定了这个的确切方式,但是如果我能find它的话我会编辑。