I'm using Puppeteer to launch a full screen 'headfull' version of Chromium to control screens around the office with dashboards and the like. We're looking at Puppeteer specifically, as a number of the screens we want to show need a scripted login to access.
Seems like using kiosk mode always leaves a gray bar at the top of the page (example) - presumably where the tab bar and title bar is normally.
Is there any way to expand the viewport to be truly kiosk / full screen? I've tried both appMode true/false to no avail. Also tried specifically setting the viewport to the screen resolution and leaving as 0,0 (using full screen).
My launch code:
const browser = await puppeteer.launch({
headless: false,
args: ['--start-fullscreen', '--kiosk', '--disable-infobars', '--disable-session-crashed-bubble', '--noerrdialogs'],
appMode: true,
});
const page = await browser.newPage();
await page.setViewport({
width: 0,
height: 0,
});
Is it possible or a limitation of Puppeteer / Chromium?
Related
We are developing a Mobile App using the Titanium framework, we need to embed some videos in one of the screens. Appcelerator API documentation that I am following is located here. My code looks as follows, currently it shows a blank screen :
var welcomeWin = Ti.UI.createWindow({
title:'Welcome Video',
backgroundColor:'#fff'
});
var videoplayer = Titanium.Media.createVideoPlayer({
top:2,
autoplay:true,
height:300,
width:300,
url:'https://fast.wistia.net/embed/iframe/thewistiaurl',
mediaControlStyle:Titanium.Media.VIDEO_CONTROL_DEFAULT,
scalingMode:Titanium.Media.VIDEO_SCALING_ASPECT_FIT
});
welcomeWin.add(videoplayer);
Why is google reCaptcha2 (gReCaptcha) not showing after a page refresh, but showing if page is reopened by the link?
See this video for explanation: http://take.ms/I2a9Z
Page url: https://orlov.io/signup
Page first open: captcha exists.
Navigate by link: captcha exists.
Open new browser tab: captcha exists.
Refreshing page by refresh icon, ctrl+R, ctrl+F5: captcha NOT exists.
I added body unload event to prevent browser cache, it did not help.
Browsers for testing:
Firefix 39.0
Chome: 44.0.2403.125 m
Opera: 30.0
In all browsers I get the same result. So does this mean there's an error on my side?
I think it has to do with the browser and the speed of your network. You are calling ReCaptcha with a callback, but you call it before you define the callback. Depending on your network speed or browser quirks, it might execute before the rest of the script has loaded.
Line 330:
<script src="//www.google.com/recaptcha/api.js?onload=renderReCaptchaCallback&render=explicit&hl=en-US" async defer></script>
Line 351:
<script type="text/javascript">if (typeof (renderReCaptchaCallback) === "undefined") {
var reCaptchaWidgets = {};
var renderReCaptchaCallback = function() {
jQuery.each(reCaptchaWidgets, function(widgetId, widgetOptions) {
grecaptcha.render(document.getElementById(widgetId), widgetOptions);
});
};
}</script>
So I would move the definition of renderReCaptchaCallback to the top of the page so it is defined well before trying to load it.
We are working on a mobile web application. The designer likes the image carousel effect on App Store (the screenshots of the an App). So we try to mimic the same effect using JavaScript.
We are using iScroll to implement. So here is a customization of its demo carousel: http://jsfiddle.net/0t9savgj/. The options are:
{
scrollX: true,
scrollY: false,
momentum: false,
snap: true,
snapSpeed: 400,
keyBindings: true,
indicators: {
el: document.getElementById('indicator'),
resize: false
}
});
The problem is: for the last image, there is always some extra space, which is unwanted:
Does any one knows how to solve this? Or some other JS libraries implementing the same carousel? Thanks.
After exploration, the only way is to use the scroll event of iscroll-probe.js. Manually stop the scrolling when reaching the right border. But the indicators are not exact.
I downloaded the IncludeExternalPages project from the getting started site. In the main.js for iPhone I can see what the WL.TabBar should display:
function wlEnvInit(){
wlCommonInit();
WL.TabBar.init();
WL.TabBar.addItem("WLtab1", function () {tabClicked(1); } ,"Home",{
image: "tabButton:Favorites"
});
WL.TabBar.addItem("WLtab2", function () {tabClicked(2); } ,"Client",{
image: "tabButton:Search"
});
WL.TabBar.addItem("WLtab3", function () {tabClicked(3); } ,"IBM",{
image: "tabButton:More"
});
WL.TabBar.setVisible(true);
WL.TabBar.setSelectedItem("WLtab1");
tabClicked(1);
}
However, when executing this code in a simulator the labels are Favorite, Search, and More instead of Home, Client, and IBM. I made no modifications to the project, just built it and ran on the iOS simulator. This was using WL6.2 with the 9/4 update (latest).
Any ideas why the titles are defaulting to iOS instead of what is specified in the code?
When using the "built-in" OS icons (Favorites, More, Search, ...) the tab item's title will default to that of the icon instead of the label in the code.
To change that, provide your own Favorites icon, for example, and then the "Home" label will be used.
Our FB App was working fine then suddenly today we noticed that FB.setSize() is setting height to 0px! Did FB break something or the behavior of FB.setSize() has suddenly been changed.
App Url: https://apps.facebook.com/memorablestatus/
Update:-
You will now find that the above url is working fine, since I have modified my JS to call setSize with explicit width and height.
Yeah I had the same problem today, they have updated the js sdk and now the height is not correct, since I can't predict the correct height of my page I use jquery to do it, and since some things are delayed and loaded after a few seconds, I use a timeout :
FB.Array.forEach([300, 600, 1000, 2000], function(delay) {
setTimeout(function() {
FB.Canvas.setSize({height: $(document).height()});
}, delay)
});