Following is the script
<script type="text/javascript">
function DoFullScreen() {
var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || // alternative standard method
(document.mozFullScreen || document.webkitIsFullScreen);
var docElm = document.documentElement;
if (!isInFullScreen) {
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
//alert("Mozilla entering fullscreen!");
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
alert("Webkit entering fullscreen!");
}
}
}
</script>
HTML
<body onload="DoFullScreen()">
<form id="form1" runat="server" >
<div id="div1">
<input id="bt1" type="button" value="button" />
Hello
</div>
</form>
</body>
I have tried
$(window).load
$(document).ready(function(){ $("#bt1").load
-- it's not possible force a fullscreen if it's not triggered by a user action
-- look at this
full-screen browser window on load document
on ready call your function
$(document).ready(function(){
DoFullScreen();
}
You can do it using pure javascript only like this:
<script type="text/javascript">
window.onload = function () {
// YOUR CODE STUFF
}
</script>
Related
I have iframe in parent.html. Child.html sending the postMessage('documnent.cookie','*') to the parent window.
The problem is postMessage() send 'null'. postMessage() is triggered before iframe loading is completely done. I have to postMessage() to Parent window only if iframe completely loads the data.
Here is my code: parent.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<body id="Body" style="background-color:Silver">
<iframe id ="CA_FRAME_0" src="http://localhost/ibmcognos/bi/child.html" style="display:none"></iframe>
<script type="text/javascript">
window.addEventListener("message", function (e){
if(e.data == null){
alert('fail');
}else{
alert('sucess');
document.cookie="key=" +e.data + ";expires=0;path=/";
}
}, false);
</script>
<div id="arcContainer" class="arcContainer"></div>
<script type="text/javascript">
ARCPLAN.language = "XXX";
ARCPLAN.application = "lv02";
ARCPLAN.startDocName = "application.apa";
ARCPLAN.arcCgiSite = "http://localhost/.....";
</script>
</body>
</html>
//child.html
<!DOCTYPE html> <html> <head>
<title>COOKIE</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> </head> <body>
<script type="text/javascript">
function getCookie(name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while(i < clen) { var j = i
+ alen; if(document.cookie.substring(i, j) == arg)
return getCookieVal(j); i = document.cookie.indexOf(" ", i) + 1; if(i == 0)
break; } return null; }
function getCookieVal(offset) { var endstr = document.cookie.indexOf(";", offset); if(endstr == -1) endstr = document.cookie.length; return document.cookie.substring(offset, endstr); }
**parent.postMessage(getCookie("key"), "*");** </script>
**<iframe id ="CA_FRAME" src="http://localhost/ibmcognos/bi/" style="display: none;" ></iframe>** - *this url make the redirect from here and set the cookie, it takes time*
</body> </html>
Kindly provide me some suggestions. Thanks.
In this case we have a webpage A need to load another webpage B through iframe.
page A is loaded. we can add a custom event to listen page B load event.
page A code:
const iframeWin = document.getElementById('h5-iframe').contentWindow;
window.addEventListener(
'message',
(e) => {
const { data } = e;
console.log('receive page load', data);
if (data.pageLoaded) {
iframeWin.postMessage(youdata, '*');
}
},
false,
);
page B code:
window.addEventListener(
'message',
(e) => {
console.log('receive youdata', data);
const { data } = e;
},
false,
);
// after register listen function send this message to page A.
window.parent.postMessage({ pageLoaded: true }, '*');
Add an onload event to your iFrame:
<iframe id ="CA_FRAME" src="http://localhost/ibmcognos/bi/" onload="onCaFrameLoad(this)" style="display: none;"></iframe>
Then you can run JS code only after the frame has completely loaded:
function onCaFrameLoad() {
// wrap your post in this function
};
This way, the code will only run once the frame has finished loading.
PoC:
parent.html
<html>
<body>
PARENT- I get data from child
<br /><br />
<iframe id ="CA_FRAME_0" src="child.html"></iframe>
</body>
</html>
child.html
<html>
<body>
CHILD - I send data to parent - but only after CA_FRAME has loaded
<br /><br />
<iframe id ="CA_FRAME" src="inner.html" onload="onCaFrameLoad(this)"></iframe>
<script>
function onCaFrameLoad() {
alert('iframe has loaded! now you can send data to the parent');
};
</script>
</body>
</html>
inner.html
<html>
<body>
INNER - I load all my content, then the onCaFrameLoad function in child.html runs
<script>
alert('My Name is INNER - I load all my content first');
</script>
</body>
</html>
I'm trying to display play or pause button when a user clicks on it. I know I can actually compare those links but I think using a variable would be easier to see?
Thanks.
`
<!DOCTYPE html>
<html>
<head>
<title>ch6</title>
</head>
<body>
<h1>List</h1>
<h2>audio note</h2>
<p>Enter note name</p>
<input type="text" >
<br>
<img id="pic" onclick="click()" src="http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png" alt="record" style="width:50px;height:60px;">
<script type="text/javascript">
function click(){
var butt = true;
if(butt === true)
{
document.getElementById("pic").src = "https://www.shareicon.net/download/2017/02/07/878546_media_512x512.png";
butt = false;
}
else
{
document.getElementById("pic").src = "http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png";
butt = true;
}
}
</script>
</body>
</html>
`
I hope to click to change the image.
The image doesn't change when I click it.
Seems like HTML/JS doesn't allow a function named click to be set to onclick. Please change
function click(){
to
function clickk(){
and
<img id="pic" onclick="click()"
to
<img id="pic" onclick="clickk()"
Also, move your var butt = true; outside the function.
Full example below:
<!DOCTYPE html>
<html>
<head>
<title>ch6</title>
</head>
<body>
<h1>List</h1>
<h2>audio note</h2>
<p>Enter note name</p>
<input type="text">
<br>
<img id="pic" onclick="clickk()" src="http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png" alt="record" style="width:50px;height:60px;">
<script type="text/javascript">
var butt = true;
function clickk() {
if (butt === true) {
document.getElementById("pic").src = "https://www.shareicon.net/download/2017/02/07/878546_media_512x512.png";
butt = false;
} else {
document.getElementById("pic").src = "http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png";
butt = true;
}
}
</script>
</body>
</html>
You need to take the variable initialization outside of the function itself
<script type="text/javascript">
var butt = true;
function click(){
if(butt === true)
{
document.getElementById("pic").src = "https://www.shareicon.net/download/2017/02/07/878546_media_512x512.png";
butt = false;
}
else
{
document.getElementById("pic").src = "http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png";
butt = true;
}
}
</script>
Try use this code:
<img id="pic" src="http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png" alt="record" style="width:50px;height:60px;">
<script type="text/javascript">
var butt = true;
var img = document.getElementById('pic');
img.addEventListener('click', click);
function click(e){
if(butt === true)
{
e.target.src = "https://www.shareicon.net/download/2017/02/07/878546_media_512x512.png";
butt = false;
}
else
{
e.target.src = "http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png";
butt = true;
}
}
Declare the variable outside the click function::
var butt = true;
function click(){
}
now work same in that function
I have this on my cshtml:
<button onclick="save()" id="fundersSave" data-action="save-funder" type="button" class="btn btn-primary btn-lg">#Strings.Buttons_Save</button>
Then on my cshtml I have added the javascript:
<body>
<script type="text/javascript">
function save(){
var $form = $('.fancybox-inner').find('[data-area="funder-detail"]');
$form.on('click', '[data-action="save-funder"]', function () {
alert();
var selected1 = $form.find('input[type="radio"]:checked').val();
if ($('input[type="radio"]:checked').length == 0) {
parent.$.fancybox.close();
}
else {
document.getElementById("txtFunder").value = selected1;
parent.$.fancybox.close();
}
});
}
</script>
</body>
When I click on the [Save] button, I get undefined error.
If you included your jquery librairy at the bottom of your _layout, move it just after the body tag !
I am using Twitter Bootstrap 2 and jQuery. I have simple HTML button as follows:
<button type="button" onclick="Redirect(1,'');" class="btn btn-danger">Cancel</button>
In the head section I have a javascript function as follows:
function Redirect(id, push) {
if (id == 1) {
if (push == 1) {
window.location.href('../dashjs/dashboardjs.aspx?pushchart=1');
}
else {
window.location.href('../dashjs/dashboardjs.aspx');
}
return false;
}
}
For some reason, the function Redicect is never called in CHROME. This seems to be working in IE.
Any ideas of what might be the issue here.
The following are loaded in the head section:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="../Content/bootstrap-button.js"></script>
any help will be much appreciated.
window.location.href actually isn't a method.
Try:
window.location.href = '../dashjs/dashboardjs.aspx?pushchart=1';
http://www.w3schools.com/jsref/prop_loc_href.asp
<script type="text/javascript">
function Redirect(id, push) {
if (id == 1) {
window.location.href = 'http://www.google.com';
} else {
window.location.href = 'http://www.yahoo.com.com';
}
return false;
}
</script>
</head>
<body>
<button type="button" onclick= Redirect(1,''); class="btn btn-danger">Cancel</button>
</body>
Try that. you need to assign location using =
If you want to use your syntax try window.location.replace as a redirect
I have a jQuery function which monitors the 'beforeunload' status.
So therefore every time i do a refresh this method is executed.
The function is as follows:
<script type="text/javascript">
var bIsSafeRedirect = false;
$('#reload').click(function()
{
bIsSafeRedirect = true;
location.reload();
});
$(window).bind('beforeunload', function()
{
if (!bIsSafeRedirect )
{
return '>>>>>Before You Go<<<<<<<< \n Your custom message go here';
}
});
</script>
Now i have other components such as
<td onClick="window.location.replace('try.html')" id="reload" target="Content">
which onclick reloads the same page.
I this scenario where the table data is clicked i dont want the jQuery function to be invoked.I want it to be skipped as a special case.
How can i achieve it.
The entire code is shown below
<html>
<head>
<title>Refresh a page in jQuery</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function load()
{
document.getElementById("first").value="hello";
}
</script>
</head>
<body>
<h1>Stop a page from exit with jQuery</h1>
<button id="reload">Refresh a Page in jQuery</button>
<script type="text/javascript">
var bIsSafeRedirect = false;
function unload(type, url){
if(type === 'noReturn'){
$(window).unbind("beforeunload");
window.location.replace(url);
} else if(!bIsSafeRedirect && type === 'return') {
var conf = confirm('do you want to quit');
if(conf){
alert("ajax");
} else {
return false;
}
}
}
$(window).bind("beforeunload", function(){
unload('return');
});
</script>
<table>
<tr>
<td onClick="window.location.replace('try.html')" id="reload" target="Content">
<td onClick="unload('noReturn','try.html')">
Usual Refresh
</td>
</tr>
</table>
<input type="text" id="first" size="15"/>
<input type="button" onclick="load()" value="load"/>
</body>
</html>
Try this:
<td onClick="replaceContent();" id="reload" target="Content">
Here is the replaceContent() function:
function replaceContent(){
$(window).unbind('beforeunload');
window.location.replace('try.html');
}
one way is to prepend this to onClick:
$(window).unbind('beforenload');
the other way is to use a global flag, exactly like the bIsSafeRedirect you're currently using. Change the beforeunload handler body like this:
if (shouldRefresh && !bIsSafeRedirect)
{
return '>>>>>Before You Go<<<<<<<< \n Your custom message go here';
}
and set shouldRefresh value to false in onClick.
Make a function that handles both of these:
function unload(type, url){
if(type === 'noReturn'){
$(window).unbind("beforeunload");
window.location.replace(url);
} else if(!bIsSafeRedirect && type === 'return') {
var conf = confirm('Confirmation message');
if(conf){
// fire ajax call here
} else {
return false;
}
}
}
And then fire this function in your bind() call:
$(window).bind("beforeunload", function(){
unload('return');
});
Since we supply the return string to the type parameter, it fires the else if part of the if statement, which doesn't unbind the beforeunload event and so returns that string.
And for your other components:
<td onClick="unload('noReturn','try.html')"></td>
So now, since we have supplied the noReturn string to the type parameter, the first part of the if statement will execute and load the page without the interference of the beforeunload handler by unbinding it.
With this method, you can use the unload function on multiple elements' inline onclick handlers and make it a more globally usable script.