[]本地双击html如何打开laya项目?

url链接的本地图片可以双击html打开,而mornui的资源,本地无法显示。 如何做可以读到该资源?
已邀请:

cuixueying

赞同来自: qianyifei

@qianyifei
  您的问题:layaflash转换好的h5项目,在PC端和移动端双击html文件,打开项目MornUI的资源没有显示且报错。如何解决在PC端和移动端直接访问本地的html文件?
解答:
1、PC端直接访问本地的html文件
  除了firefox浏览器外,其他浏览器默认是不允许跨域访问的。因此需要开发者手动添加启动参数。
  我们建议开发者在PC端直接使用chrome浏览器进行项目调试。目前layaFlash的编译器IDE已经集成了chrome编译环境,无需开发者手动添加启动参数即可正常访问游戏效果并对项目进行调试。
参考:LayaFlash调试项目
  所以目前2中操作可以保证项目的正常访问且无报错
a、直接使用layaflash已经配置好的宏命令(laya_publish_h5)

QQ图片20160104213807.png

 b、在桌面的chrome快捷方式上添加启动参数
桌面chrome快捷方式 | 右击属性 | 快捷方式 | 目标末尾 | 

11.png

 b.1 --allow-file-access-frome-files
b.2 --disable-web-security
参考:chrome报跨域错调试(论坛解答)
   为什么打开Chrome会报域的错?(官网解答)
注意:不支持直接双击html文件的方式打开,建议使用添加过启动参数的快捷方式打开html文件。
 2、移动端直接访问本地的html文件
  有的开发者在调试项目的时候,发现了一个棘手的问题,就是在手机某些浏览器上加载本地的html5会报错,如下:
    
22.png
 
  这个错是由于移动端浏览器的安全性设置的问题导致的,android手机的默认浏览器都是webkit内核,而webkit内核的浏览器默认是禁止从本地ajax加载文件的(类似PC端需要添加启动参数)。PC端我们已经知道了添加启动参数即可有效的解决该问题,而android手机没有给用户提供相应的权限,怎么办呢?
  我们先来看一下不同浏览器的内核:android手机的默认浏览器均采用webkit作为浏览器内核,只有firefox采用的是GekCo内核,微软的IE系列使用的是Trident内核,而QQ浏览器一部分使用的是webkit内核,一部分是其他内核。
  看下程序,你应该是用webview加载的本地html5,webview的官网api有这样一句话:
This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages 。
原来webview也相当于一个浏览器,使用webkit作为渲染引擎,所以使用webview加载本地html5和手机的外部浏览器没有关系。得出结论:原因就是webkit内核默认是禁止加载本地html5,有的厂商修改了安全性设置,就可以加载了。
具体解决方案参考如下:
 前面已经得出android中加载本地html5所遇到问题的原因,针对这个原因,目前有以下两种解决方案,
第一种解决方案:
     对于每一个景区,新建一个android application,然后将动景手动复制到工程的asset中,然后用webView从asset中加载动景,这样就避免了webkit内核禁止加载本地html5的问题,然后将应用打包成apk,这样每次都下载景区对应的动景apk,下载完之后自动安装,这样只需要访问apk就可以解决了,安装apk:
 public static boolean install(Context context, String filePath) {

Intent i = new Intent(Intent. ACTION_VIEW);

File file = new File(filePath);

if (file != null && file.length() > 0 && file.exists() && file.isFile()) {

i.setDataAndType(Uri.parse("file://" + filePath),
"application/vnd.android.package-archive" );

i.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

context.startActivity( i);

return true ;

}

return false ;

}
 
安装完之后,我们只需要根据apk的包名去访问apk,代码如下:
  Intent intent = new Intent(Intent. ACTION_MAIN);
intent.addCategory(Intent. CATEGORY_LAUNCHER);
ComponentName cn = new ComponentName("com.ly" , "com.ly.MainActivity");
intent.setComponent(cn);
startActivity(intent);

 其中new ComponentName("com.ly" , "com.ly.MainActivity" )中所传的第一个参数是要访问的apk的包名,第二个参数是要访问的apk的入口的activity的类名(包括包名)。
 
 
第二种解决方案:
既然weblit内核的浏览器可以调用服务器的html5,那我们为何不在本地写一个服务器,然后通过访问本地的服务器去加载本地的html5,这样就不存在安全性设置的问题了。在这里,我们在服务器端先采用单线程去处理客户端发送过来的请求。下面是服务器的源码:
 public class HttpServer implements Runnable {
static HttpServer httpServer;
private static final String TAG = "HttpServer";
/**
* 服务器端的socket
*/
ServerSocket server;
/**
* 服务器监听的端口号
*/
public static final int PORT = 8080;

// public static HttpServer getInstance(){
// if(httpServer == null){
// httpServer = new HttpServer();
// }
// return httpServer;
// }

public HttpServer() {
try {
server = new ServerSocket(PORT);
} catch (IOException e) {
// TODO Auto-generated catch block
Log. i(TAG, "异常信息:" + e.getMessage());
}
new Thread(this).start();
Log. i(TAG, "server is start......");
}
public void run() {
// 服务器端连续监听客户端
while (true ) {
Socket client = null;
try {
client = server.accept();
// 创建分线程
// httpRequestHandler request = new httpRequestHandler(client);
// // 启动线程
// new Thread(request).start();
if(client!=null){
Log. i(TAG, "已连接到服务器:" +client);
//获取客户端的输入流
BufferedReader in = new BufferedReader(new
InputStreamReader(client.getInputStream()));
//读取第一行
String line = in.readLine();
if(line==null||line.equals("")||line.equals( "\r\n")){
break;
}
Log. i(TAG, "客户端发送的消息是:" +line);
String tokens = line.split( " ");
if(tokens[0].equalsIgnoreCase("GET" )){
String fileName = tokens[1];
fileService(fileName, client);
}
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}

}
/**
* 读取文件的内容
*
* @param fileName
* @param socket
*/
public void fileService(String fileName, Socket socket) {
PrintStream os = null;
try {
os = new PrintStream(socket.getOutputStream(), true);
File file = new File(fileName);
if (file.exists() && !file.isDirectory()) {
os.println( " HTTP/1.0 200 OK "); // 返回应答消息,并结束应答
os.println( " Content-Type:" + generatecontentType(fileName));
os.println( " Content-Length: " + file.length()); // 返回内容字节数
os.println();
FileInputStream fis = null;
try {
fis = new FileInputStream(file);
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
os.println( "HTTP/1.0 404" + e.getMessage());
}
byte buffer = null;
Log. i(TAG, "文件大小:" + buffer. length);
Log. i(TAG, "内容:" + buffer.toString());

buffer = new byte [fis.available()];
fis.read(buffer);
os.write(buffer);
os.flush();
os.close();
fis.close();
socket.close();
} else {
os.println( "HTTP/1.0 404 FileNotFonud!" );
os.close();
}
} catch (IOException e) {
// TODO Auto-generated catch block
os.println( "HTTP/1.0 404" + e.getMessage());
}

}

private String generatecontentType(String fileName) {
if (fileName.endsWith("html" ) || fileName.endsWith("htm")
|| fileName.endsWith( "xml")) {
return "text/html" ;
} else if (fileName.endsWith("png")) {
return "application/binarary" ;
} else if (fileName.endsWith("jpg")) {
return "image/jpeg" ;
} else if (fileName.endsWith("js")) {
return "application/x-javascript" ;
} else if (fileName.endsWith("swf")) {
return "application/x-shockwave-flash" ;
}
return "*/*" ;
}
}


参考链接:android关于加载本地html5的问题(解决办法)
      android关于加载本地html5的问题(解决办法)下

要回复问题请先

商务合作
商务合作