This is an updated question based on feedback from "glautrou": I have an LCD Cape coming for a BeagleBone Black single board computer and I want to have a web page displayed on the LCD with no borders, no scroll bars, and NO TITLE BAR. I am experimenting with getting this to work using the below code which was cut down from an example located at http://lesson8.blogspot.co.uk/2013/01/html5-fullscreen-api.html.
My desire is to have this run either when the page loads or from within a script...and NOT requiring the press of a button. The below script works fine with the button but does not work with either the open or script invocations. I will admit now that I don't really understand the DOM so I suspect that I am missing something simple.
<!DOCTYPE html>
<html>
<head>
</head>
<BODY onLoad="launchFullscreen(document.documentElement);">
<h1>HTML5 Fullscreen API</h1>
<div style="padding:20px;">
<button onclick="launchFullscreen(document.documentElement);" class="sexyButton">Launch Fullscreen</button>
<button onclick="cancelFullscreen();" class="sexyButton">Hide Fullscreen</button>
</div>
<script type='text/javascript'>//<![CDATA[
function launchFullscreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
function cancelFullscreen() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
launchFullscreen(document.documentElement);
//]]>
</script>
</body>
</html>
Thanks in advance,
Will
There is a specific fullscreen API in HTML5, look at HTML5 FullScreen API toggle with JavaScript and this tutorial.
I had lost sight of the fact that I am running an embedded (single user) application here...when that re-occurred to me I looked for a way to send keystrokes to the browser. I found, and installed, xdotool as it was packaged for angstrom, and wrote a little autostart script. It works a charm though I will now automate it a little better via my node.js application. Thanks for the help, Will
Another way to meet my requirement given that I am running Chrome...
chrome.exe --kiosk --incognito some.web.site
Kiosk does the full screen thing and incognito prevents the question about restoring sessions in the case of an ungraceful shutdown.
This is what I needed regardless of what I may have thought that I needed!
Related
I am trying to integrate the JavaFx WebView into a Swing application. I am through with the implementation and am finally stuck on just one last missing piece. As part of the requirement, we do need the ability to print certain content. The content is all existing third party html / site and all works fine, except for the embedded print button on the pages. The Print button calls the window.print() and somehow that does not work and am unable to print. This is a needed feature for us and am out of ideas and need some help.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to print the current page.</p>
<button onclick="myFunction()">Print this page</button>
<script>
function myFunction() {
window.print();
}
</script>
</body>
</html>
My web engine initialization is as follows:
Runnable r = () ->
{
WebView view = new WebView();
m_WebEngine = view.getEngine();
//view.setContextMenuEnabled(false);
getWebEngine().setOnStatusChanged(getStatusHandler());
getWebEngine().getLoadWorker().workDoneProperty().addListener(getProgressListener());
getWebEngine().getLoadWorker().exceptionProperty().addListener(getErrorListener());
getWebEngine().titleProperty().addListener(getTitleListener());
getWebEngine().getLoadWorker().stateProperty().addListener(getStatusListener());
getWebEngine().setOnAlert(event -> showAlert(event.getData()));
getWebEngine().setConfirmHandler(message -> showConfirm(message));
getWebEngine().setJavaScriptEnabled(true);
getJfxPanel().setScene(new Scene(view));
};
Platform.runLater(r);
I tried with alert, popup, prompt and all other handlers and just doesn't work.
Any help on handling this properly would be greatly appreciated.
hi i am working on a website using HTML CSS JavaScript and jQuery.
I wanted to display website fullscreen(like when we click F11) onload. I am able to enter fullscreen using onclick even. But with onload event fullscreen script is not working. When i load a site it should display in fullscreen. please help. Here is my code :
here is my HTML code:
<html id="player3">
<body onload="goFullscreen('player');">
</body>
</html>
Here is my js
function goFullscreen() {
var element = document.getElementById("player3");
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();}
}
Browsers doesn't allow sites to load in fullscreen mode without user interaction. You will get the following error message
Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.
To Handle this change your UX to make the user interact with your site to go fullscreen mode.
I added an onload, ondrag, onmouseover, oncontextmenu and more to make sure it is always at fullscreen
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body id="appin" onclick="openFullscreen();" onload="openFullscreen();" onmouseover="openFullscreen();" oncontextmenu="openFullscreen()" ondrag="select()">
<h1>Fullscreen on load page</h1>
<style>
*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
background-color: rgba(255,255,255,0)!important;
padding: 20px;
}
::backdrop
{
background-color: white;
}
</style>
<script>
var elem = document.getElementById("appin");
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
<p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>
<p>Note: It does not work on iframes, that means, it will not work on the stackoverflow snipped. Copy and paste the code to ex. w3schools and it will work :)</p>
</body>
</html>
Have something wrong in your code:
Your function have no parameter:
function goFullscreen()
But when you call it, you transfer parameter to function:
onload="goFullscreen('player');"
And if everything is right. you should be put javascript function in $(document).ready()
This solution: https://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/
you can create an index.html with this code in the body on load, fill in "fullScreenPage.html" with url of the page that you can open in fullscreen.
<body onload="window.open('fullScreenPage.html, '', 'fullscreen=yes, scrollbars=auto');"></body>
I am using the following jquery plugin to enable fullscreen in my web app.
https://github.com/martinaglv/jQuery-FullScreen
It works great, except that when I am in fullscreen mode my textarea is not editable? Why is this? Is it a browser thing or the plugin?
It doesnt seem to be disabled in any way...
My test code below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/martinaglv/jQuery-FullScreen/master/fullscreen/jquery.fullscreen.js"></script>
</head>
<body>
<div id="content">
<textarea></textarea>
<button>
Go Go Fullscreen</button>
</div>
<script type="text/javascript">
(function () {
if ($.support.fullscreen) {
$('button').click(function (e) {
$('#content').fullScreen();
});
}
})();
</script>
</body>
</html>
There is a workaround (for Chrome, at least), but I don't know how it factors into the plug-in you're using. You have to pass along a little instruction to allow keyboard input:
document.body.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
UPDATE:
You could modify the plug-in pretty easily. This function would change to reflect the above:
function requestFullScreen(elem){
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
}
}
By default, the plug-in forces the browser to enter full-screen mode without allowing keyboard input.
More information here from MDN, and the thread where I found some clues.
From the tutorial:
The idea of allowing developers to programatically take up the user screen doesn’t come without serious security implications, which is why keyboard usage is limited. Of course, there are many legitimate uses for keyboard input in full screen, which is going to be addressed in future revisions of the API via some kind of permission prompt.
However, even in its current, limited form, the API still gives us an opportunity to enhance the experience of the end user.
It doesn't even go full screen in some browsers, like IE 9.
http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
I have this very simple Javascript to write on a text area when the link is clicked:
<head>
<script language="javascript" type="text/javascript">
function addtext(text) {document.form.textarea.value = document.form.textarea.value+= text;}
</script>
</head>
<body>
<form action="" method="" name="form">
<textarea name="textarea" rows="" cols="" wrap="wrap"></textarea>
</form>
q
</body>
Now I want to up the ante.
What I want to do is have the form in another another window, and that when I click the link, I writes to a textarea in another window.
I'm not necessarily asking for the code because I realize this might be quite complicated.
The question would be where to start, because I haven´t got a clue!!
(when I Google cross window or cross domain interaction with Javascript I don't really get anything useful).
So any help I can get, libraries, plugins or whatever might guide me in the right direction is more than appreciated.
Ok, I wrote you a sample you can check at http://jsfiddle.net/zzdAL/
$(document).ready(function()
{
popup = window.open("http://fiddle.jshell.net");
$("#input1").click(function() {
try {
popup.document.window.alert(1);
}
catch (e) { alert(e.message); }
});
}
);
It only runs an alert on the popup, but you can do whatever you want with the popup, assuming you have the necessary rights (needs to be the same domain I believe).
The most simple is to write a function in your popup and call it from the opener.
Probably it's too late, but here is an example of interaction: window interaction
Take a look to greasemonkey, it's an addon for your browser.
You can choose on which page(s) the script will works.
http://wiki.greasespot.net/Main_Page
I have a situation where I have web apps on two different servers, where App1 contains App2 in an IFrame. Any links in App2 can have target="_parent" attribute, which allow those links to open in the top window. However, I can't find any way to get the same behavior in Javascript. I found this page, which claims that the child frame can call javascript on the parent frame using parent.foo(), but that doesn't seem to work in IE8 or FF3.5. I found this SO question which explains how this security model works. But it seems odd that I can't do in Javascript what I can do with a simple <a> tag. Is there any workaround to this at all? I know about window.postMessage, but (as far as I know) this only works in Firefox.
Example
server1/test.html
<html>
<head>
<script type="text/javascript">
function myCallback(foo) {
alert(foo);
}
</script>
</head>
<body>
<iframe src="http://server2/test2.htm" width="400" height="150"></iframe>
</body></html>
server2/test2.html
<html><body>
<script>
function clickit() {
parent.document.location = "http://www.google.com"; //not allowed
parent.myCallback("http://www.google.com"); //not allowed
}
</script>
<p>This should be in an iFrame!</p>
<p>normal link (works)</p>
<p>javascript link</p>
</body></html>
OK I did more investigation, and it appears that postMessage works in all modern browsers, even IE (with the caveat that IE has a slightly different way of doing it). Here's how I got it to work (tested on WinXP in IE8, FF3.5, Chrome 3.0, Safari 4 beta, Opera 9.64):
server1/test.html
<html>
<head>
<script type="text/javascript">
if(navigator.appName == "Microsoft Internet Explorer")
window.attachEvent("onmessage", receiveMessage);
else
window.addEventListener("message", receiveMessage, false);
function receiveMessage(e) {
if(e.origin == "http://server2") //important for security
if(e.data.indexOf('redirect:') == 0)
document.location = e.data.substr(9);
}
</script>
</head>
<body>
<iframe src="http://server2/test2.htm" width="400" height="150"></iframe>
</body>
</html>
server2/test2.htm
<html><body>
<script>
function clickit() {
parent.postMessage('redirect:http://www.google.com', 'http://server1');
}
</script>
<p>This should be in an iFrame!</p>
<p>normal link</p>
<p>javascript link</p>
</body></html>
A simple thing you can do is:
execute following from JavaScript code of iframe page
top.location = "https://www.google.co.in/";
this will change the location of window's URL to https://www.google.co.in/.
One more thing -This strategy can also be useful when you do not want that any one can inframe your site
just write the above code in document ready part.
No, and for good reason. If you need this, then you must run all communication through one of the two servers; for example, have server1 act as as a proxy for all requests for "server2/test2.html".
If both parent and iframe are on subdomains under the same domain, you may be able to do something with the document.domain property. If both body and iframe are treated as being from the same origin, changing the location should be possible; I haven't tried this myself. Some reading here
If the frames are on the same domain, you should be able to access the parent frame. Otherwise no, it's a security issue.
The only workaround that springs to mind would be to use AJAX to update a file on each of the servers, then check the contents of the opposite file server-side. You could do the same thing using a single database, if you allow connections from external domains.
This is all kind of overkill though, when you could simply pop-up a link in the frame and tell users to click it to continue.