Develop Reference

Javascript acting differently in inappbrowser vs Chrome - Undefined global variables

My problem is that when I use inappbrowser to open my web page, the main javascript file seems to be ignored, even though it is referenced in the Head of the file that I am opening using ref = cordova.InAppBrowser.open('https://MYURLHERE:8484/home/login', '_self', 'location=yes');
I am using chrome://inspect/#devices to inspect the console and I get errors when hitting buttons.. Anything referenced in the main.js file is undefined.. whereas the actual code for the autocomplete and button seems to be executing.
Please note The url is working fine when viewed in the chrome browser. The javascript files seem to load correctly, and all variables are defined correctly. - It is only when I use inappbrowser that I see issues with undefined variables.
My code (cordova app):
ref = cordova.InAppBrowser.open('https://MYURLHERE:8484/home/login', '_self', 'location=yes');
var myInAppBrowserCallback = function(event) {
console.log(event.url, 'LOADED');
};
ref.addEventListener('loadstart', myInAppBrowserCallback);
//Works fine.
My code (from the actual website I'm trying to view in Inappbrowser):
<script src="/Scripts/commonFunctions.js"></script>
var p = 'Hello';
<script src="/Scripts/loginPage.js"></script>
$('#btnLogin').on('click', function() {
alert(p);
});
Returns an alert with undefined.
What I have tried:
Extensive googling! (all the answers seem to be related to javascript not being enabled.. or 404 errors or things like that.. Not with global variables from one js file being undefined in another js file.)
Removing inappbrowser, using window.open.. Won't work as the app needs to execute scripts to inspect localstorage of the site.
Re-installing the android platform using cordova.
Re-installing the plugin.
Checking chrome in the inspector to ensure the files are in sources tab (they are).
Checking that the functions in main.js also exist (they do).
Thanks, JFIT

Summary:
The problem was that a javascript file was trying to load 'SpeechSynthesis' which was undefined only in the inappbrowser.
Details:
The problem with this was confusing but here are the steps I found to debug / solve:
Set up Remote Debugging on the phone so that you can view the console of the phone using chrome://inspect/#devices
View the console of the inappbrowser site (which will show as a seperate page to the inappbrowser instance.
Identify which files are being loaded and remove files until 'undefined' errors disappear.
Add back in the most recent file and start to strip out various functions (especially functions/variables before document.ready (global variables also)
Find the line/variable that way. It was handy for me this way as the actual undefined variable showed up after I removed most of the files.
The actual cause of my error was the speechSynthesis functionality.
The speechsynthesis lines were removed, and I readded all remaining files and everything works. This function works fine in chrome on desktop/android but not in the inappbrowser.

VS2015 error "Application is not currently attached to a script debug target that supports script diagnostics"

I created JS & HTML5 Blank App with Visual Studio 2015. When running it in VS debugger in "Local Machine" mode, I get the following error message:
Application is not currently attached to a script debug target that
supports script diagnostics
Just ignoring the error is not workable as at least breakpoints and console.log("text") do not work.
I'm having default options in VS.
I am running normal Win10, with automatic updates on.
Reinstallation of VS2015 did not solve the issue.

This worked for me although I was doing something slightly different. I got the same error message using IE 11 accessing a HTML file from my local file system (was mucking around with HTML). Seems IE developer tools don't much like this mode of operation (why?!). Here's my story...
File on my local windows laptop:
c:\temp\test.html
Can be opened in these browsers:
URL: file:///C:/Temp/test.html (in chrome)
URL: C:\Temp\test.html (in IE 11)
In Chrome tools commands in the console can be run no problem e.g.
console.log("hi");
In IE developer tools this fails with the message cited by the op.
I had a reverse proxy installed on my laptop (nginx) so tried serving the file up via HTTP and this fixed the issue with IE. Here's how I would access the file via HTTP via the proxy:
http://localhost:9092/temp/test.html
For reference here's my nginx.conf (but any other proxy would I expect work fine)...
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
server {
listen 9092;
server_name localhost;
location /temp {
alias "C:/temp/";
}
}
}

In my case (VS 2017 not 2015), the option shown below had somehow become unticked (I'm blaming an update). Before ticking this I was getting the same error as the OP; after ticking it, all is well again.
NB I'm debugging the Javascript within a WebBrowser control hosted in a Winform.

I finally got this solved with the help of Jack-Zhai in msdn forum. So, the summary of my journey:-
Problem:
- Running JS UWP blank app in debug mode & local machine w default settings in VS2015 generates a warning "Application is not currently attached to a script debug target that supports script diagnostics" into JavaScript console. Breakpoints do not work, adding console.log("here") does not write anything to console
Solution trial 1:
- changing and playing with VS2015 settings; the problem still exists
Solution trial 2:
- reinstalling VS2015; the problem still exists
Solution trial 3:
- reinstalling Windows10 - all applications deleted but user data not
- installing VS2015
=> Problem solved; debugging blank app works, and console.log("test") works

Vaadin #Javascript : clear cache for updated JS file

I have a #JavaScript annotation in my application to load a .js file from the classpath.
Now I've made an update to the file and redeployed (locally), but I always get the old version back. I've tried reloading everything (ctrl+R, ctrl+F5) but that doesn't work and also I wouldn't want the users to have to do that.
A trick I used in the past (without Vaadin) was to append a request parameter with the version (e.g. ?version=1) and update that so that the URL changes. But apparently that isn't allowed for the #JavaScript annotation (Vaadin doesn't even try to load the file).

I have overcome this by utilizing the resourceCacheTime parameter of the Vaadin servlet configuration:
#VaadinServletConfiguration(ui = MyUI.class, resourceCacheTime = 0)
Although it has its limitation as described in my answer to another question here.

This is browser feature to localy cache JS files, nothing to do with Vaadin.
As you figure it out yourself: If you want to make sure users have latest version of JS file, you should rename JS file name to: script_buildNumber.js.

Use the Chrome's incognito feature (and not use it when visiting spicy/unpleasant websites).
Just open your browser in Incognito mode https://support.google.com/chrome/answer/95464?hl=en and the browser will cache nothing.
Other browsers have this feature as well (Opera, IE, Firefox, Safari).

As I noted in my comment on the question on January 12th, renaming the file worked. This seems to be currently the only way, although it's far from ideal.

Windows Phone 7 and 8 with PhoneGap + Angular dies during bootstrapping

Windows Phone 7 or 8
PhoneGap 3
AngularJS 1.2
I have a PhoneGap app using AngularJS that works great on iOS and Android, but I'm having a problem getting it to work on Windows Phone 7 and 8.
The app starts fine and I see my index.html page (which in my case is just a loading screen). Source files are loaded and my pre-boot code is running fine.
Then it stops and nothing happens.
I've littered "console.log" messages throughout the code and I see it gets to the point of angular.bootstrap() and then dies. I'm not familiar enough with angular to know what to do next or how to debug this further to track down what the absolute problem code might be. Inside of bootstrap() begins the maze of DI calls so the code becomes much less linear.
I do see this error in the console but have no idea what it means or how to fix it:
An exception of type 'System.NotSupportedException' occurred in Microsoft.Phone.ni.dll and wasn't handled before a managed/native boundary
No other errors or any output is logged to the console. I tried delaying all of my bootstrap code by 10 seconds with a setTimeout and that error is always reported before angular.bootstrap() is called, so I don't know if it is even related.
Also worth noting that I've tried the app in IE on the desktop and it works fine there.
So my question is: How do I go about debugging this?

I am unsure of WP7/8 but if it follows Windows 8 pattern try adding JQuery 2.0 before angular.js
http://net.tutsplus.com/tutorials/javascript-ajax/building-windows-store-applications-with-jquery-2-0/

I agree with Jason, use Windows special/custom jQuery. And add unsafe=true
<script src="js/jquery-1.8.2-win8-1.0.min.js"></script>
<script type="text/javascript">
jQuery.isUnsafe = true;
</script>
The functionality of the Windows 8-patch had been included in jQuery 2.0. So can just use jQuery 2.0 in the same way, and it will work'.
So you can also use:
<script src="/lib/jquery-2.0.0.min.js"></script>
<script>
jQuery.isUnsafe = true;
</script>

I don't think this error is relevant because it is present even if you start Cordova/Phongap template app (I tried with Cordova 2.9.0). Visual Studio dosen't give any good explanation why app is not running, that's why I tried weinre and got the following massage on app reloade with angular-1.0.8
Error: Access is denied.
at hookedFunction (http://"my-weinre-ip":8080/target/target-script-min.js#ddtest:551:1)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:9457:7)
at sendReq (x-wmapp0://www/components/angular/angular.js:9334:9)
at $http (x-wmapp0://www/components/angular/angular.js:9125:7)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:9268:11)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:7592:17)
at wrappedCallback (x-wmapp0://www/components/angular/angular.js:6996:15)
at wrappedCallback (x-wmapp0://www/components/angular/angular.js:6996:15)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:7033:11)
at $eval (x-wmapp0://www/components/angular/angular.js:8219:9)
I reported it to angular here
EDIT
I managed to get a basic angular app running in phonegap WP7 (haven't tested it yet on WP8) by
applying fix from github ( I can't post second link not enough reputation)
#github/RobbinHabermehl/angular.js/commit/2645faad908529b5d33af960270755dd65a9aa78
including jquery (2.0.3) above angular.js
changing line of code in angular from
var xhr = new XHR();
to
var xhr = new XMLHttpRequest();
manually bootstrapping angular app after cordova deviceready event fired
I reported it in my original thread here

pdf.js not working with Safari

We're testing out pdf.js and while it seems like an awesome project we can't get it working in Safari.
(Tested on PDF.JS version = 0.8.229 (latest) / Safari 5.1.9 - 6.0.4 / Mac OSX 10.6.8 - 10.8.3)
EXAMPLE:
This is an example of the demo code served from our server with a sample PDF that works on Chrome/FFox but not Safari:
http://test.appgrinders.com/pdf_js/test.html
Console output:
Warning: Setting up fake worker.
Error: Invalid XRef stream (while reading XRef):
Error: Invalid XRef stream pdf.js:850undefined
Warning: Indexing all PDF objects
Error: Invalid XRef stream (while reading XRef):
Error: Invalid XRef stream pdf.js:850undefined
More tests:
The following is a list of sample PDFs we tested (They were all served from our server, and all worked in Chrome/FFox/Android). The only one that worked with Safari was the PDF file served from the pdf.js project itself:
FAILS IN SAFARI:
http://samplepdf.com/sample.pdf
http://forums.adobe.com/servlet/JiveServlet/previewBody/2041-102-1-2139/Sample.pdf
https://github.com/prawnpdf/prawn/raw/master/data/pdfs/form.pdf
WORKS IN SAFARI:
http://cdn.mozilla.net/pdfjs/helloworld.pdf
(NOTE: This is a sample PDF from the pdf.js project and the only one we ever got working)
We've submitted a bug report, but the developers do not seem to have an answer, so I'm hoping someone here might...
How can we get pdf.js working with Safari?

I've figured out how to get things working on Mac Safari (without necessarily understanding why)...
compatibility.js must be included.
PDFJS.workerSrc must be assigned.
The demo code I had been testing (from the JS Bin demos here)
does not do this, though some other online examples do (including
the hello world example and the examples provided by
#AndrewBenjamin – thanks). Other browsers don't seem to require this,
but Safari won't work without it.
<script type="text/javascript" src="compatibility.js"></script>
<script type="text/javascript" src="pdf.js"></script>
<!-- NEED THIS for Safari Mac to render work -->
<script type="text/javascript">
// Specify the main script used to create a new PDF.JS web worker.
// In production, change this to point to the combined `pdf.js` file.
PDFJS.workerSrc = 'pdf.worker.js';
</script>
Again, can't explain why, but this is how we got it working for us.

I've got PDF.js working fine in Safari on my local server, but when I put it on the remote server, the goofy error comes back:
Warning: Setting up fake worker.
Unhandled rejection: Error: INVALID_STATE_ERR: DOM Exception 11
It will also show this error on my local computer if I happen to have the developer console open. Close the console, PDF displays in Safari; open the console, and it doesn't work anymore.
The question is: what do the developer tools and the remote server change versus running on a local server? Is this still a range-checking problem?
I got PDF.js to work, though! I've modified so much stuff I don't know what part of what I did worked. Here's a list of stuff I did.
Added compatibility.js – modified the last function in it to read like this:
(function checkRangeRequests() {
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
if (!isSafari) {
return;
}
document.addEventListener('DOMContentLoaded', function (e) {
if (isSafari) {
PDFJS.disableRange = true;
}
});
})();
Changed the order of xhr.open() calls in pdf.js so that xhr.setRequestHeader() occurs after xhr.open()
Removed all 'use strict'; lines
Added xhr.setRequestHeader("Cache-control", "no-cache"); after xhr.open on lines 37272 and 41262
Minified pdf.js and it all works all the time!

PDFJS.getDocument() will accept either a string link or a Uint8Array. In my client side version I pass PDFJS.getDocument() a Uint8Array, but if I want an existing file rendered, I just pass the path to the file:
jspdf line 965:
PDFJS.getDocument('..files/pdf/sample.pdf').then(function(pdf) {
I don't know what makes your safari browser fail, but if you can see sample.pdf on my test site, you have to be very close to solving this.

I've figured out how to get things working on Mac Safari & iPad
I removed the 'strict mode' at the beginning of
1. pdf.js/src/core/worker.js
2. pdf.js/web/download_manager.js
And worked!!

if you're going to support versions below Safari 14, from what I understood PDFjs doesn't support that.
you will need to use an external viewer in an object tag:
<object data="https://drive.google.com/viewerng/viewer?embedded=true&url=https://researchtorevenue.files.wordpress.com/2015/04/1r41ai10801601_fong.pdf&embedded=true"></object>

I had the same problem with Safari Mobile... Can't open more than 1 Mb PDF's... I solved fragmenting the file in parts of 900 kb, join them in local and then injecting to pdf.js as Uint8Array() object. I think it's a no documented limitation.