Vue-fullscreen error with user-generated event - javascript

I am using the vue-fullscreen plugin to trigger a fullscreen of an element in my code. I am calling the function using #click, yet despite that I am getting the following error:
Firefox:
Request for fullscreen was denied because Element.requestFullscreen()
was not called from inside a short running user-generated event
handler.
Chrome:
Failed to execute 'requestFullscreen' on 'Element': API can only be
initiated by a user gesture.
As per threads like the following, Javascript request fullscreen is unreliable, I have have found the following warnings:
Make sure it is generated directly by a user click.
I think I am.
Make sure there is not more than a 1 second delay between the user generated action and the function.
I find no delay, especially given the function is incredibly short and direct.
If you are using iframes, make sure you allow fullscreen parameters, including in any parent iframes.
I am not using an iframes.
Here is a snippet of my code:
HTML:
<div class="tool_circle_button" #click="toggleFullscreen"></div>
<fullscreen :fullscreen.sync="fullscreen">
Content
</fullscreen>
Javascript:
toggleFullscreen () {
console.log(this.fullscreen)
this.fullscreen = !this.fullscreen
},
Do these errors suggest that the #click command is not being recognized as a user-generated click? If not, what else could be causing this? Thanks so much for your help!

Related

Clicking reCaptchas in JavaScript

I am working on a project, and it involves me clicking a reCaptcha element (iframe) in JavaScript. I have found multiple ways to detect if there is a reCaptcha element (".g-recaptcha", role='presentation' on the iframe itself, etc) however upon trying to click it I get console errors. Note that right now I am just executing the code in the web console, and have not actually programmed it into an extension. Basically, the command I am trying to run the console is :
document.querySelector('[role="presentation"]').contentWindow.document.getElementById("recaptcha-anchor").click()
The reason this "should" work is because the iframe element has the unique attribute of "role=presentation", it then goes into the html code embedded in the iframe and tries to click the little box, as noted by "recaptcha-anchor". However, testing this code grants me the following error:
VM8195:1 Uncaught DOMException: Blocked a frame with origin "https://minecraft.buzz" from accessing a cross-origin frame.
at <anonymous>:1:62
(anonymous) # VM8195:1
Does someone have any ways to get around this, or potentially know how I could code something in a JS chrome extension to do this?

How to mute active browser tab programatically with JS tabs API?

I'm trying to build a simple userscript to automatically mute tabs matching a certain URL. I'm trying to start simple, just muting the active tab if it matches the URL. Here's the code I would expect to perform the mute action:
browser.tabs.update({muted: true});
But when I try to run it, nothing happens. From the tabs.update documentation I know I don't have to specify a tab ID if I'm working with the active tab, but it also says that this function returns a Promise, and I'm not familiar with how that affects things. (Every example I can find of a Promise uses the .then method to call specific actions after the Promise is completed, e.g. writing console output. But I don't need anything to happen afterwards, I just want it to happen.)
Can anyone help figure out why this code isn't working?
(Note: I'm running userscripts on Firefox using the Firemonkey extension.)
browser.tabs.update({muted: true});
Above API is in browser scope (for browser & extensions) and is not available in userScript or content scope where user-scripts run.
In user-scripts, you need to use Web API.
Here is an idea that you can work on .... not tested
document.querySelectorAll('audio, video').forEach(item => {
item.muted = true;
item.pause();
});

Inconsistent execution of executeScript in Cordova inAppBrowser on iOS

I'm having some trouble with some inAppBrowser behavior in my cordova app. Here's the code:
var codePass = fooCode;
var executeScriptFunc = function(event) {
ref.executeScript({
code: codePass
}, function (value) {});
ref.removeEventListener('loadstop', executeScriptFunc);
};
var ref = cordova.InAppBrowser.open(fooObject.link, "_blank", "location=yes,enableViewportScale=yes");
ref.addEventListener('loadstop', executeScriptFunc)
The strange thing here is that the code works perfectly every time when emulated. It opens the browser and executes the script no problem. But when I try it on my actual iPhone device, it doesn't always work. The script executes maybe every other time. But it's never even that consistent.
Both the emulator and iPhone are using iOS 9.3.4. Any ideas?
If the site inside the inAppBrowser happens to be served via HTTPS, the callback for executeScript() will not work if the site employs a Content-Security-Policy HTTP response header that does not contain the gap: or gap-iab: schemes for the default-src directive. These are needed because execution of the callback function on iOS relies on an iframe that gets added to the page.
You can check whether this is the root cause for the problem by opening Safari’s Web Inspector for the inAppBrowser—it has a separate Web Inspector instance, independent of the parent application that opened it—and look out for a corresponding error message in the console. Note that you should open the console before executeScript() is run, or otherwise you might not get the error message.
Make sure also that you don't have other event handlers firing at the same time during your polling.
I had multiple pollers all firing every second and that's when I ran into the issue.
After changing the polling time so they all fired at different times, the issue went away.

Cocos2d-js hangs on bootscreen when trying to go fullscreen

my cocos2d-js game hangs with "Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture" on the loader-screen" on mobile.
since it seems that cocos requests fullscreen withou me coding that explicitly: how can i prevent this from happening?
thanks a lot!
I have found the solution hidden in the docs:
cc.view.enableAutoFullScreen(false);
edit:
that seems not to work on Chrome...
still getting:
Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.
For fullscreen functionality in browser you can use https://github.com/bdougherty/BigScreen instead of cocos built in api (I've used this lib with my HTML5 games). It's only 1.4kb and works as it should
Because of security constraints going to full screen should be triggered by a user gesture, so you'll need a button for it (You may call it Start Game for example) which will trigger this click handler
function fullscreenButtonClick() {
if (BigScreen.enabled) {
BigScreen.request(element, onEnter, onExit, onError);
// You could also use .toggle(element, onEnter, onExit, onError)
}
else {
// fallback for browsers that don't support full screen
}
}

how to fix iframe load never terminating the browser visual spinner and 'Transfer ...' status

I have pages loading json into hidden iframes from javascript.
The Firefox browser seems to never acknowledge fully receiving the iframe content, and reports 'Transferring data from ...' on the status line, and shows the twirly 'busy' icon on the tab, indefinitely.
I am using jQuery to bind the 'load' handlers, and would prefer a solution that does not involve over-riding jQuery functionality.
btw, the load handler does fire, the json received is complete, and the iframe itself gets .remove()d in the cleanup code. The browser still waits for something to signal completeness.
Ben Nadel posted a blogpost on just this topic.
It seems that Firefox acknowledges that an iframe document was completely received only after the onload handler returns. If the iframe is deleted from the DOM within the handler, Firefox never detects completion. The solution Mr Nadel suggested, and which I used, is to use the javascript timer to call a deletion function to run after a brief delay. This allows the handler to return while the iframe persists, but does not let the iframe linger around.

Categories