Why does document.body.requestFullscreen() work on the first invocation only? - javascript

I have the following method which works on the 1st call, however if I hit the Esc key and then try my FullScreen button nothing happens. Debugging the code shows the else is not executing so document.body.requestFullScreen() is being called again but it has no effect??
What did I miss?
/**
* Full Screen Mode
+ works on Windows7 Chrome v80 and Android Chrome.
- 20180415
- 20200417 Moved from ChannelsTitleComp
*/
FullScreenToggle() {
// document.body.requestFullscreen() works on Windows Chrome and Android Chrome.
// https://stackoverflow.com/questions/53048372/how-to-programmatically-switch-display-from-standalone-to-fullscreen-in-pwa
if (document.body.requestFullscreen) {
document.body.requestFullscreen()
}
else {
Log.Write(this, "requestFullscreen", document.body.requestFullscreen)
document.exitFullscreen()
}
did not incorporate something like this for a toggle YET
// https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
if (document.fullscreenElement)
document.exitFullscreen()
Thank you for your insights.
20200418 16:42 Update
A reply from Oscar requested to print the value of requestFullscreen the second time thru. I did and t seems to be the same according to the following console output.
Here is the code I used

Related

Can't get the gyroscope to work in an IOS browser by using JavaScript

So basically I'm trying to alter the perspective of an image by using the gyroscope in a smartphone/tablet. So far I've got most working, on anything but IOS (classic developer issue).
https://jsfiddle.net/seiftie/db020Lxk/34/
NOTE: This can only be viewed from a device with a gyroscope. If it works, you'll see a status (ex: DeviceOrientationEvent activated).
So for some reason this block doesn't work on IOS browsers:
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', doDeviceOrientation);
}
var doDeviceOrientation = function(event){
// THIS NEVER GETS TRIGGERED IN IOS
debug("Inside the doDeviceOrientation function after eventListener");
status("DeviceOrientationEvent activated");
sendCoords(event.alpha, event.beta, event.gamma);
distortImage(event.alpha, event.beta, event.gamma);
}
I don't seem to understand what I'm missing here. If my question caused confusion, let me know in the comments below and I'll try to clarify.

Javascript does not work on Safari browser real devices

I have a scenario where i need to enter email and click on submit button but when webdriver enters email and clicks on submit button an error is thrown "Email is Required" although webdriver entered the email which i can see. I have this issue on Firefox and Safari both on Desktop and mobile devices. With a bit of research i able to fix for Firefox with below javascript code.
JavascriptExecutor js = ((JavascriptExecutor)driver);
js.executeScript("var e=document.getElementById('email'); e.dispatchEvent(new Event('change')); e.dispatchEvent(new Event('blur')); return true;" );
But the same code does not work on mobile safari on real device. Could someone help in fixing this issue ?
Environment
Appium version - 1.6.5 Mac os : 10.12.6 Node.js version - 3.10.10
Mobile platform/version under test: - 10.3 Iphone 6 Real device Using
Appium desktop client Logs: <script
src="https://gist.github.com/mahesh-thuma/f02f6fdc81d48d4c0a16e2dd71412e0c.js"></script>
Figured out the issue. There is a small change in the email attribute from desktop ("email") to mobile ("Email"). Modified the javascript accordingly and i am able to proceed ahead. Though this is still an workaround but does the job. Closing this issue and Thanks to anyone investing time on this.
import Page from './page';
class YahooPage extends Page {
/**
* define elements
*/
get searchInput() { return browser.element('#yschsp'); }
get searchButton() { return browser.element('//div[#class="mag-glass"]'); }
get resultsList() { return browser.element('#results'); }
/**
* define or overwrite page methods
*/
open () {
super.open('https://search.yahoo.com') //provide your additional URL if any. this will append to the baseUrl to form complete URL
browser.pause(1000);
}
enterText (item) {
this.searchInput.clearElement();
this.searchInput.setValue(item);
}
search () {
this.searchButton.click();
}
isSearched () {
this.resultsList.waitForVisible(1000);
return this.resultsList.isVisible();
}
}
export default new YahooPage();enter code here

Reloading and debugging JavaScript in TVOS simulator

I have started looking at tutorials for making TVML/TVJS based apps for the new Apple TV, and I have two problems that makes the development process very tedious and impractical.
First thing I am having trouble understanding is how I am supposed to debug code that happens on startup of the application. I have connected the Safari debugger, and I do manage to hit some breakpoints, but only for code that is triggered by some user input. On startup I am loading an xml document from a remote location, and I will use this to dynamically generate the tvml template, but I cannot get the debugger to stop anywhere in the code that is running before the template is done rendering.
The other anti-productive problem I have is that I cannot seem to reload the JavaScript files in any other way than completely shutting down the application in the simulator (double-click the home button, and swipe the app away). This also makes the debugger quit, so I have to restart that one as well. This surely cannot be the way you are supposed to do continuous development and testing?
You can make the debugger stop at the first line when you choose the Auto Pause and Auto Show options from the Safari menu "Develop/Simulator".
You are correct about the exit issue.
One thing you can also try is to run App.reload() from the Safari Debugger console.
This also restarts the app, maybe in the future they can make it work so the debugger will not be gone.
But at the moment this also does not solve the issue.
For manual debugger output (aka console.log()), you could redirect the logging to the Xcode debugger.
(somewhere on the web) I found a way to actually do that, in short it looks like...
AppDelegate.Swift
func appController(appController: TVApplicationController, evaluateAppJavaScriptInContext jsContext: JSContext) {
let jsInterface: cJsInterface = cJsInterface();
jsContext.setObject(jsInterface, forKeyedSubscript: "swiftInterface")
}
App.js
// re-route console.log() to XCode debug window
var console = {
log: function() {
var message = '';
for(var i = 0; i < arguments.length; i++) {
message += arguments[i] + ' '
};
swiftInterface.log(message)
}
};
JsInterface.Swift
#objc protocol jsInterfaceProtocol : JSExport {
func log(message: String) -> Void
}
...
class cJsInterface: NSObject, jsInterfaceProtocol {
func log(message: String) -> Void {
print("JS: \(message)")
}
}
Complete sources in github: https://github.com/iBaa/PlexConnectApp/tree/f512dfd9c1cb2fbfed2da43c4e3837435b0b22af
I don't have any solution for the dying debugger myself...

Geolocation problems when switch GPS on and off

Thanks in advance first.I build a website with an option to lead you to a specific place when you click button "Navigate". Everything works fine on desktop and everything works fine on mobile when GPS of the phone is enabled.
I use the google maps reference and it works just fine:
http://maps.google.com/maps?saddr=myLat,myLng&daddr=targetLat,targetLng
I do this on $('.button').click(). Not on $(window).load or $(document).ready. When you click the button, it calls the geolocation functions:
function getGeolocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
} else {
$('.error-message').html('<p>Your browser does not support this function</p>');
}
}
function geoSuccess(position) {
myLat = position.coords.latitude;
myLng = position.coords.longitude;
window.location.href = 'http://maps.google.com/maps?saddr=' + myLat + ',' + myLng + '&daddr=targetLat,targetLng';
}
function geoError(){
switch(error.code) {
alert('example alert - enable GPS');
case error.PERMISSION_DENIED:
$('.error-message').html('<p>User denied the request for Geolocation.</p>');
break;
case error.POSITION_UNAVAILABLE:
$('.error-message').html('<p>Location information is unavailable.</p>');
break;
case error.TIMEOUT:
$('.error-message').html('<p>The request to get user location timed out.</p>');
break;
case error.UNKNOWN_ERROR:
$('.error-message').html('<p>An unknown error occurred.</p>');
break;
}
}
But the problem comes when the GPS is disabled.
First of all, sometimes, it doesn't enter in geoError(). I tried so many times, but the only thing I "found" is that it caches sometimes. Is that possible ?
But the main problem is that, when the GPS is disabled, the "example alert" pops up, then I turn my GPS on and click the button again, it doesn't work again. I have to refresh the page to apply the GPS turn on. I want to avoid that. Does anyone know why is that happening and is there a way to do what I want?
The other problem is when I load my page with GPS turned on. Then I turn it off and click the button. Nothing happens at all. It enter getGeolocation(), gets true and then it stops. It doesn't enter getCurrentPosition(). Any ideas?
I had ever faced the same problem, and final I found the solution. You can change getCurrentPosition to watchPosition, it seems getCurrentPosition cannot recognize when location changes, watch help us do that. Try my solution, hope it helps you :)
P/S you should settime out: 10000 for watchpostion or getcurrentpostion
I've got the same problem on Android 6.0 and Chrome 59.0.3071.125.
In short: When I start a webapp with location Off, I receive a PositionError as expected.
However when I switch location back to On, every subsequent call to navigator.geolocation.getCurrentPosition or navigator.geolocation.watchPosition returns same error.
I've tried the same with maps.google.com and result is exactly the same (they show a snackbar Google Maps could not determine your precise location) so I believe that there is no workaround.
There is a similar post on ionic framework forum - They didn't find a solution either.
To sum up:
Looks like Chrome is checking for location services **on page load and doesn't update the state any more.
So only thing that helps is reloading the webapp which forces chrome to check again if location services are available.
Update:
this is a known bug in Chromium: 672301, 721977.
Workaround is available in Chrome Mobile v59 behind lsd-permission-prompts flag.
In your error function, the argument is missing.
function geoError(error){
//code goes here
}
Source: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_error

I cant read my cookie out in google chrome but I can in all other browsers

I am setting a cookie to hide a cookie notice on a my website.
This works fine in all other browsers but Google Chrome(and Opera to it seems) (not even tested in IE yet)
Here is my code that reads out the cookies and makes the decision whether to run the show function or do nothing.
This function is called up on page load
checkCookie = function() {
var myCookieSet = getCookie("useofcookies");
if (myCookieSet != "closed"){
alert('cookie is not set and = '+ myCookieSet);
// run the show info bar function
init();
}else {
alert('cookie HAS BEEN set and = '+ myCookieSet);
}
};
I cannot figure out what I have done wrong.
Full js file can be found here:
Cookie Notice - Pastebin
Any clues as to why would this is happening in Chrome alone would be a great help
Have you tried clearing your cache and cookies? IE a 'clean browser'?
The code looks fine and when I use your code it seems to work for me. Even in IE 8/9

Categories

Resources