I'm trying to add bounce reporting for my landing page and have added the following code in Javascript (prefer to use pure Javascript).
window.addEventListener('unload', function () {
this.alert("unloading page");
reportBounce();
});
In reportBounce() I make an AJAX call to let the server know. I don't care about the response and am not showing a popup or anything.
The reportBounce fires up when on Chrome browser on Mac, but it does not fire when on safari on Mac. I am yet to try other browsers and OS combinations.
I've seen several questions, some talk about Back/Forward cache, some about Safari on IOS and using 'pagehide' instead of 'unload' but none that actually worked for Safari on Mac.
I was hoping there be a standard function that does the check for browser
and adds the correct event for this need.
Please advice on how to get this to work. Thanks!
Related
I am creating p2p application to share video and screen from Chrome to Mozilla. When I work with Chrome on both sides, it works fine. But when Mozilla is receiving screensharing video, I get a problem.
To start screenshare I do the following in Chrome:
connection.addStream({screen: true, oneway: true}
On the client side I have this callback:
connection.onstream = function (e) {
// handle input stream
}
With Mozilla this callback is not launched, but I see flickering on my main webcam stream: few frames from webcam and few frames from screenshare continiously.
How can I fix this? Is this Mozilla bug?
it you're adding more than one stream to a single peerconnection, you may be hitting the fact that Chrome and Firefox support different dialects of SDP.
Unless you do translation of the SDP, you'll have to use different peerconnections until the chrome bug is fixed.
My solution was migrating to SimpleRTC (http://simplewebrtc.com). This is same sort of library, but it is updated regularly to reflect browsers/API changes. The challange was signalling layer, because it uses special (opensource) library on top of socketio to handle chat rooms. But now screensharing works correctly.
Im developing an app in ionic and its working perfectly fine in android, emulators and web (with ionic serve). But when is running in ios devices in transitions between pages suddenly it shows a white view instead the view that it have to display. This doesn't happen all time and i didn't figured out when specifically happen.
I appreciate any help.
it is probably a javascript error. To find it, the best way is:
first connect the phone with your mac (must be a mac) by USB.
Open Safary (no Chrome or Firefox)
In the Safary settings -> Advanced -> enable develop tools
Now on Safary will appear a develop menu on the top, click on it and you will see your phone and the app running, click on it.
In the develop tools, will appear all the console you normally see testing with ionic serve, but in the real device.
Just use the app and when you get a black page check the javascript error on safary develop tool.
I hope it helps, it did helped me a lot after discover it.
Finally I resolve it, it was a problem with transitions of ionic in ios. Adding this line to config in app.js like this
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.swipeBackEnabled(false);
}
Disable all back navigations transitions with swipe.
For what I searched, it can be a lot of things.. What helped me to figure out my case was small commits.
Anyway, I tried to use default param values and it doesn't work for my webview in iOS. If that's your problem too, you can see an alternative way to do default param values here:
Set a default parameter value for a JavaScript function
didn't work:
function(param = defaultValue){}
did work:
function(param){
param = param ? param : defaultValue;
}
Simply use can-swipe-back="false" on your ion-view element.
Using the standard HTML5 geolocation code, I am able to access the geolocation on desktop browsers (Chrome, Firefox), but not on my Samsung Galaxy S3 (default browser, Chrome). In the default browser, nothing at all happens. In Chrome, the yellow permissions form pops up at the bottom but then pops down too quickly to press anything. I have checked that Location is enabled in Settings. I am considering looking for a PHP solution as a backup for cases when JavaScript/HTML5 solution breaks down like this, but would prefer that the JavaScript solution be more robust.
Has anyone come across this and fixed it? Any ideas?
For reference, the "standard" HTML5 geolocation code I'm referring to is this (sample code from: Basic Geolocation in HTML5):
<script type="text/javascript">
if( navigator.geolocation )
{
// Call getCurrentPosition with success and failure callbacks
navigator.geolocation.getCurrentPosition( success, fail );
}
else
{
alert("Sorry, your browser does not support geolocation services.");
}
function success(position)
{
// GeoPosition Object
alert("Your coordinates are " + position.latitude + ", " + position.longitude);
}
function fail()
{
// Could not obtain location
}
</script>
Odd. I did 3 things and now it works in both phone browsers (default and chrome)
I put the main code in a function that is called in <body onload="">
I restarted my phone
I turned off power saving mode
I suspect the restart did the most for it, since I was seeing the permission pop up flash across the screen in chrome.
I need to be able to monitor navigation events (such as page loads or switching between active tabs) in browsers running on a Windows PC. So far, I can get this to work in IE and Firefox by loading a DLL into all running apps via a call to SetWindowsHookEx, then asking for either the IHTMLDocument2 (in IE) or nsIWebProgress (in Firefox) interface from the application. I can use the appropriate interface to request a callback from the application when an event of interest happens.
Is there a way to do this in Chrome? I have read a little about Chrome extensions, but I have not found any documentation on an API exposed by Chrome that is analogous to COM in IE or XPCOM in Firefox. Will a similar approach work or will I need to do something completely different? (I am working in C++.)
I would appreciate it if someone could at least point me in the right direction.
Thanks.
With Chrome extensions API you can register some events handlers for changing state of tab like when document state is changed (loading or loaded), when new tab is added/removed from window or when user switch between tabs.
More about tabs events You find on http://code.google.com/chrome/extensions/tabs.html#event-onActiveChanged
Does anybody know how to use HTML5 to achieve uploads by drag-drop files form desktop?
I have found the following references:
Selecting files using drag and drop (2017-08) on developer.mozilla.org
Drag and drop file uploading using JavaScript the article states that the api was changed and links to The File Api has changed (2010-09)
html5-drag-and-drop-multiple-file-upload (2017-11 returns 404) on http://www.appelsiini.net/ (is still live)
but is there a solution that can run on all platforms: Firefox, Chrome and Safari?
Many thanks!
Sorry, at the moment there is no cross browser solution available.
Current Browser Implementation Issues
FF, Safari, Chrome, IE (Cross-Browser Issues)
No recursive folder uploading -- as a matter of fact, no folder uploading at all. While this isn't a show stopper, it does seem kind of silly to allow a user to select a folder in the file upload input box if the browser won't send all the files inside that folder too.
Firefox 3.6.*
This browser supports file drag and drop, however the implementation is quite possibly the worst ever conceived. In order to upload a file that the user dropped, we have to read the entire file into memory and then send it over Ajax to our servers. This works fine for drops of around 10MB. If you try that same operation with a 400MB file, forget it!
Firefox 4.* (Beta)
The Mozilla developers are quick ones -- they realized the problem with their previous implementation and have created a whole new way to implement drag and drop uploading. The FormData object is a new JavaScript object that allows a web developer to insert file uploads directly into an Ajax request without reading the files into memory first. I was really excited about this and promptly downloaded Firefox 4 which is in its 2nd beta. After playing around with it for less than 5 minutes, I strongly discourage you from trying it yet. My system became incredibly unstable and slow and development was a major pain due to lack of support for Firebug.
Chrome (latest)
This browser is by far the best in its implementation! Simple and straightforward, my only complaint here is that you can't upload a folder and its contents via drag and drop.
Safari 4.* & 5.*
Since Safari is built on top of WebKit just like Google Chrome, I expected it to work just as well. Wow, was I mistaken! I tried this in both Safari 4 and Safari 5. While dragging and dropping multiple files into the window works, Safari sends the first file multiple times, instead of sending all the files. Talk about a MAJOR bug. To make it even more interesting, if the user clicks on the drop location, they can select multiple files to upload using the standard file selection dialog -- and that works as expected! I can't wait for Safari to fix this issue.
Internet Explorer
To be honest, I haven't even bothered trying to do drag and drop uploads in Internet Explorer yet. Trying to support IE is a pain due to lack of good development tools and a non-conforming JavaScript engine. Since I haven't been able to get all the preferred browsers to play nice, I can't imagine Internet Explorer will be even close.
source
I would defiantly look into running Plupload. It allows great browser capability and supports multiple file drag and drop in HTML5 browsers that support FileReader.
So lets say for example you dont have html 5 it will deprecate down to flash / gears / silverlight depending on what that individual has installed.
Here's the compatibility chart:
http://www.plupload.com/index.php
It has an option called droparea: "somediv" that allows you to drag files into it and automatically cue up a file upload.
Let me know if you need any help setting it up.
Here is a simple example. If you drag an image over the red div it appends the image to the body. I've confirmed it works in IE11, Chrome 38, and Firefox 32. See this Html5Rocks article for a more detailed explanation.
<div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div>
<script>
var dropZone = document.getElementById('dropZone');
// Optional. Show the copy icon when dragging over. Seems to only work for chrome.
dropZone.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
// Get file data on drop
dropZone.addEventListener('drop', function(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files; // Array of all files
for (var i=0, file; file=files[i]; i++) {
if (file.type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function(e2) {
var img = document.createElement('img');
img.src= e2.target.result;
document.body.appendChild(img);
}
reader.readAsDataURL(file);
} } });
</script>