I am developing an iOS/Android app by using HTML5, JS and CSS3 in a WebView. iOS devices and phones with Android 2.x work without any problems. But tablets equipped with Android 3.x or 4.x do not load the webpage.
Basically I am building a webpage like this
<html lang="en" style="-webkit-text-size-adjust:none; display:block;">
<head>
<meta charset="utf-8"></meta>
<meta http-equiv="content-script-type" content="text/javascript">
<title>Project Name</title>
<script type="text/javascript" src="File1.js"></script>
<script type="text/javascript" src="File2.js"></script>
<script type="text/javascript" src="File3.js"></script>
<script type="text/javascript" src="File4.js"></script>
...
<body style="margin: 0px; width: 100%; height: 100%; overflow:hidden">
</body>
</html>
(in total, 25 javascript file includes)
I have overwritten WebViewClient::onPageStarted, WebViewClient::onReceivedError, WebViewClient::onPageFinished. WebViewClient::onPageStarted gets called and the LOG shows the javascripts being loaded. But WebViewClient::onPageFinished never gets called and the webpage does not build. The window "load" callback does not happen and therefore none of the js files get executed.
So, I put an alert popup into my window "load" function and removed one file after the other to see if this helps. And indeed this helped. When I only include 4-6 files the window "load" function gets called. But this is also somehow random and does not depend on which files I remove. LOG does not show any error either. Everything seems to be fine
Is there any limit in number of include files introduced in Android 3.x and later? Android 2.x works without any problem. Also Chrome and Safari on my desktop PC display the site without any errors.
Any ideas?
I am not sure of the limit, but I would suggest using google closure compiler on your js files to get around this issue.
Related
I've been trying to get Safari to start pre-loading assets while a page is loading but nothing seems to work. Chrome and Firefox seem to do it just fine though.
The setup is simple enough. A script renders the following html with a 2s pause in the middle. The first part of the response has been flushed out and streamed to the browser. This is confirmed by Firefox and Chrome's ability to start fetching the js early.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preload" href="http://localhost:8888/js.js" as="script" />
<script href="http://localhost:8888/js.js"/>
</head>
<!-- here the script rendering the HTML would actually pause
for 2s before rendering the rest of the document -->
<!-- the first part of the response has been
flushed and sent to the browser already -->
<body>
</body>
</html>
Fetching the JS file also has a 2s delay added to it. This makes things easy to visualize in browser timelines.
Note that Chrome & Firefox will start loading the JS early even if no <link preload> is present. They seem to just start parsing the HTML as soon as they get a bit of it and download any js they encounter along the way.
On Firefox I get the following waterfall:
On Chrome I get about the same:
On Safari however all I ever can get is:
Which clearly shows Safari not trying to asynchronously load the script and instead waiting for the full html response to be received.
What am I missing? Does safari just not do any asset pre-loading at all?
At the moment, Safari doesn’t support <link rel=preload>, which explains the waterfall you’re seeing. The good news is that Jen Simmons, one of their Web Evangelists, has asked on Twitter what developers would use it for if it existed.
In Coda on my iPad Pro I have the following two files in a single directory that I named assets. When I try to preview the template.html file either in Coda or Safari (in side by side mode) I cannot get any interaction with javascript calls on events.
I have consulted the panic library regarding this and tried searching if similar issues have been encountered, but to no avail. The documentation clearly states that html/css/javascript rendering is supported by the preview functionality of Coda.
I have tried including the script directly in the head, the body, importing in a script tag and importing in a source tag and none have worked. CSS styling works as expected. I have tried many iterations that I won't list below, but this is the simplest case that I'm currently working with.
assets/template.html
<!DOCTYPE html>
<html>
<head>
<source type="text/javascript" src="assets/scripts.js"></source>
</head>
<body>
<h1 class="myheader" id="theheader">Hello?</h1>
<button onclick="doStuff()">click me</button>
</body>
</html>
assets/scripts.js
doStuff(){
document.getElementById('theheader').style.color = 'red';
}
In my HTA application I'm using a JavaScript calendar window, it opens using window.open() and closed using window.close(), when the user clicks on one of the dates. This calendar works fine on multiple browsers and versions over more than 10 years. It even works in HTA applications most of the time.
However on specific workstations running IE11. The window.close() command is simply ignored, resulting in the window left open. On other IE11 workstations it works fine. I figured that turning off the "Enable Protected Mode" checkbox on IE11, Internet Options, Security tab resolves the problem on one of the problematic workstation. However, other workstations works fine with this setting turned on and turning off this setting is not an acceptable solution.
Code sample which reproduces the problem:
HTA application
<HTML>
<HEAD>
<HTA:APPLICATION ID="OpenCloseExample" BORDER="thick" BORDERSTYLE="complex"/>
<TITLE>Open Close HTA container</TITLE>
</HEAD>
<iframe width="1024px" height="768px" src="http://localhost:28080/openclose.html"/>
</HTML>
openclose.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<script src="openclose.js"></script>
</head>
<body>
open
</body>
</html>
openclose.js
var win;
function openWindow() {
win = window.open("", "_blank", 'width=250,height=250,status=no,resizable=no,location=no,top=100,left=100');
win.document.writeln("<html><head><script src='openclose.js'></script></head><a href='#' onclick='javascript:window.opener.closeWindow()'>close</a></html>");
}
function closeWindow() {
win.window.close();
}
I can't see this working in any IE with any settings. The problem is this string: <script src='openclose.js'></script>. That is, a literal ending script tag in a string works as an ending script tag on a page, when HTML parser will find it. This means, that your script was never loaded.
To fix this, you've to break the literal tag, for example like so:
<script src='openclose.js'><\/script>
Since you have pointed out that IE11 is causing the JS not to work, you can force IE to render in an older version very easily.
<meta http-equiv="X-UA-Compatible" content="IE=9">
This meta tag is very popular amongst HTA applications for utilizing JS/ActiveX methods/properties within specific IE versions (most of them being deprecated).
For more information, visit the X-UA-Compatible Tag Wiki
Hope this helps
I figured this out eventually.
Changing:
open
to:
open
Has resolved the problem
I'm creating a phonegap application that links to a website, which I want to load when the page is started up.
Here is what I've tried, a simple onload method calling a window.open function and I've tried a function that is called when the device is ready. I'm running the latest version of Phonegap, which is 3.5.0 and an Android HTC One running 4.4.2. Below is my code for deviceready. This code is within the index.html code, in the www folder within my Durandal applcation. I believe it's not working because I don't have the cordova.js file which is imported in the example code at this link http://docs.phonegap.com/en/3.5.0/cordova_events_events.md.html#Events
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="lib/durandal/css/durandal.css" />
<script type="text/javascript" charset="UTF-8">
function onLoad () {
document.addEventListener("deviceready", function () {
window.open("http://google.com", "_system");
}, false);
}
</script>
</head>
<body onload="onLoad">
<div id="applicationHost"></div>
<script src="lib/require/require.js" data-main="app/main"></script>
</body>
</html>
Thank you for any help. This is my first stack overflow question. Please tell me if my question format isn't right and how I can improve it for future questions. Also, please suggest other ways that I can open a window on app start up using phonegap. Another option I've considered is developing an app with Android and Java, create a WebView, but that doesn't give me the cross platform deployment I want for Android and Windows Phone and I'd like to write this simple app using HTML,CSS, JS using Durandal, and PhoneGap.
Add this line just after durandal.css addition link.
<script type="text/javascript" src="cordova.js"></script>
Without cordova.js deviceready function won't fire. You don't need to see right now where is that cordova.js. It'll be added automatically by phonegap. Right now just add this line.
I'm just starting to playing around on a Mac for the first time and I have created a very simple HTML page that uses jQuery to do a simple text swap when an h1 tag is clicked.
When I don't view the page through the webserver and just open it directly in Safari (file:///Applications/xampp/xamppfiles/htdocs/test/mypage.html) it works as expected. However, when I try to view through Apache (http://localhost/test/mypage.html) it doesn't work.
Here's the code:
<html>
<head>
<title>My Awesome Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
function sayHello()
{ $('#foo').text('Hi there!');
}
</script>
</head>
<body>
<h1 id="foo" onclick="sayHello()">Click me!</h1>
</body>
</html>
Am I missing something on the Mac? Wouldn't be an Apache setting since its client-side code.. right?
I should probably also mention that I loaded XAMPP to run Apache and MySQL. I have tested Apache to ensure its working using a simple PHP file.
Steve
Use Firebug and access the page. One things that might be a culprit is that the web server cannot open jquery.js file because of file permission. Firebug will show if the jquery loaded in page, even you can add the jQuery code on-the-fly in the Console tab.
If you access it using Safari, use Web Inspector and see the if any error showed in Console tab.
One last thing, make a habit to avoid onclick, do this instead:
<script type="text/javascript" charset="utf-8">
function sayHello()
{
$('#foo').text('Hi there!');
}
//wait DOM loaded
jQuery(function($){
$('#foo').click(function(){
sayHello();
});
});
</script>
Also, it's better to put the js code near the page end, before </body>, so it would not block concurrent page element's loading.