I'm using Kinvey's backend services accessing by their Javascript API. Initialisation of Kinvey works fine in any PC browser (Safari, FF, Chrome) and also on FF mobile and Chrome mobile. I got this error on iPhone's Safari and iPad's Safari only, console output:
jQuery.Deferred exception: Can't find variable: Kinvey
https://.html:22:15
l#https://code.jquery.com/jquery-3.3.1.min.js:2:29380
https://code.jquery.com/jquery-3.3.1.min.js:2:29678
Here's the code showing the error:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My App</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://da189i1jfloii.cloudfront.net/js/kinvey-html5-sdk-3.11.1.min.js"></script>
<script src="https://matthewcv.github.io/mobiledebug.js"></script>
</head>
<script>
$(document).ready(function() {
console.log("before");
// Init Kinvey
Kinvey.init({
appKey: '<yourAppKey>',
appSecret: '<yourAppSecret>'
});
console.log("after");
});
</script>
<body>
<div>
Show something
</div>
</body>
</html>
I'm working with the latest iOS as well as the latest Javascript packages.
I wrote several times into Kinvey's forum but nobody seems to care of. So I try it here in hope someone knows the solution.
Based on remotesynth's comment I was sure that something screwed up my iPhone. After a complete reset of the device I could make it working too.
Related
I am having problems with JavaScript code not executing in iOS devices when I use the type="module" attribute.
iOS 14 seems to run it ok, however earlier versions do not.
I created a basic test (see below code) which runs fine on other devices (android mobiles and tablets, desktops) except iOS.
When running the test site on iOS 12 using three different browsers Chrome, Firefox and Safari the script still do not execute. I have even run on multiple iOS 12 devices.
I have discovered when I remove the type="module attribute the JavaScript file executes fine.
I thought perhaps iOS was not compatible with modules however according to caniuse.com JavaScript modules are compatible with iOS 11 and greater.
The code for my test site (not working on iOS) is:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Site</title>
</head>
<body>
<h1>Test Site v16.0</h1>
<p id="text-message">:( the module is not working...</p>
<button id="btn-change">This is a button, can you Click Me</button>
<script type="module" src="script2.js"></script>
</body>
</html>
script2.js
"use strict"
document.getElementById("btn-change").addEventListener("click", (e)=> {
alert("OK, if you can see this message the script is working....");
} );
const message = document.getElementById("text-message");
message.innerText = "If you can see this it means the module is working! ";
I know the problem has something to do with the type="module" attribute, however as I import/export in JavaScript (not shown in the test) I need to include this attribute.
I am relatively new to web design so there may be something vital I have not learnt yet, so any assistance or explanation would be much appreciated.
i'm trying to detect whether the browser is connected to the internet or not using javascript. my implementation works for me on both Edge and chrome but does not works when i try to test in on another pc.
i tried clearing cache, cookie and even reinstall my browsers thinking it could be cache related but still it works on my machine but not when i try it on any other. the issue is strictly related to chrome as edge seems to work fine on any other pc.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" id="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no">
<script type="text/javascript">
// Checking connectivity - Displays message and play sounds if lose
window.addEventListener('offline', () => {
console.log("offline");
});
window.addEventListener('online', () => {
console.log("online");
});
</script>
<title>Insert title here</title>
</head>
<body>
</body>
</html>
i wrote the above test html, which again works on chrome on my machine but does not for others. the expected result should be print offline in console when you disconnect the pc from internet and online when reconnected without the need to refresh the page.
I created an app in plunker using Angular 4.
Link to the code
I did it at the first moment using Chrome as my browser, but when running anything was happening. After trying various solutions, I decided to open the same plunker on Safari and then worked without an issue.
Could you please tell me why on Chrome is not working my solution?
<html>
<head>
<base href="." />
<script type="text/javascript" charset="utf-8">
window.AngularVersionForThisPlunker = 'latest'
</script>
<title>angular playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js#2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata#0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs#0.19.31/dist/system.js"></script>
<script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
I found the issue in my Plunker.
After I open in incognito mode and I saw that was working. I decided to check the Chrome plugins, as was thinking that was the issue.
I discovered that was my AddBlocker plugin which was causing the issue.
Now I resolved just whitelisting in the Adblocker the site.
If anyone will have a similar issue a good thought is to check plugins conflicts or issues.
I am completely stumped and I'm sure this was working before.
I have a simple web page with the word "hello" in a div which does two things onload:
1) alert "2"
2) change the text of the div to "bye"
All vanilla Javascript, no libraries.
This works fine on the Chrome, IE, FF, Safari (as you'd expect). If I hit a link in the iOS Twitter app (latest version) to this web page neither of those two things happen. It seems to me that the Javascript is not being executed at all but how can this be? Has anyone else experienced this?
UPDATE
In fact vanilla Javascript will work. The alert test was misleading - I believe thats been disabled which is why it won't work. JQuery will not work however - possibly to do with the $ reference conflicting.
UPDATE 2
The problem has moved on now - my initial assumptions were not entirely correct.
The following code for a web page works:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#test {
color:red;
}
</style>
<script>
window.onload = function () {
document.getElementById('test').innerHTML = 'vanilla javascript worked';
$("#test").text("Jquery worked");
}
</script>
</head>
<body>
<div id="test">
hello
</div>
</body>
</html>
The following code does not work. The path to my script is sound and works on normal browsers, but when in the iOS Twitter in-app browser it seems the local script will not load:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="~/Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<style>
#test {
color:red;
}
</style>
<script>
window.onload = function () {
document.getElementById('test').innerHTML = 'vanilla javascript worked';
$("#test").text("Jquery worked");
}
</script>
</head>
<body>
<div id="test">
hello
</div>
</body>
</html>
I have tested the issue on accessing the webpage via Facebook which also works fine either way. The problem is with the Twitter browser only on iOS.
I have tried using an absolute path to my script which also does not work.
UPDATE
This issue is not on iPad. It is iPhone only. As it was working before fine I'd say this is a bug from the latest release of the iPhone Twitter app. Will wait for a fix from Twitter.
Turned out to be that I was re-writing all requests from Twitter to a pre-rendered html instance (brombone). So when it was looking for that file it was actually looking at the brombone server not mine. I took out the rewrite and its fine now.
Completely unrelated to what I was going on about but I solved it nonetheless and may be a reminder to those with similar problems to look outside of the box and check server setups etc...
I'm working on a website in HTML5 CSS3 but I can't make my processing sketch work on other browsers than firefox.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<script type="javascript" src="processing.js"></script>
</head>
<body>
<canvas data-processing-sources="accueil.pde"></canvas>
</body>
</html>
Just answering if someone have the same error than me:
Processing sketchs work only in firefox browser if you're in localhost.
If you want to try it on other browser you need to host your website.