I want to get window.dialogArguments from modal box but i cant do that :(
I want to display automatically dialogbox when parent-page is loaded. It is ok, when i display dialogbox with userEvent like click but when i display dialogbox when body/window onload, dialogArguments is undefined, Here is my simple code:
ParentPage:
<!DOCTYPE html>
<html>
<head>
<script>
function createDialogBox()
{
var dialogBox = showModalDialog("in1.html",{"name":"Lucas"})
}
</script>
</head>
<body onLoad="createDialogBox();">
Parent Page
</body>
</html>
DialogPage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Modal dialog sample</title>
<script>
var arg = window.dialogArguments;
console.log(arg)// udefined! why?
</script>
<body>
DialogBox Page
</body>
</html>
Buy if i set eventHandler like onclick on the body everything is ok:
Parent Page:
<!DOCTYPE html>
<html>
<head>
<script>
function createDialogBox()
{
var dialogBox = showModalDialog("in1.html",{"name":"Lucas"})
}
</script>
</head>
<body>
Parent Page
<button onClick="createDialogBox()">Show Dialog Box</button>
</body>
</html>
Where is the problem?
In addition when i load dialog box body.onload, i get in firefox attention but if i load when i click the button attention not display.
I have firefox 49.
Related
I was learning javascript and experimenting with mouse events. In this code I am trying to manipulate the element when I put the mouse over it with the help of an alert box. However the problem is that the alert box is shown even when the mouse is not over the element.
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<a>dasdasd</a>
<p id="k">as</p>
<script type="text/javascript">
document.getElementById("k").onmouseover=alert('Hello');
</script>
</body>
</html>
The property onmouseover expect that you assing a function to it, instead you are assigning the evaluation of an expression, in this case: alert("hello"). So when the document loads, it evaluate that expression and the alert is shown, then a null value is assigned to the onmouseover property, that is the reason the alert only shows once.
For your goal, you can use an anonymous function to wrap the alert and assing it to the property. Check the next example:
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<a>dasdasd</a>
<p id="k" style="border: 1px solid red">as</p>
<script type="text/javascript">
document.getElementById("k").onmouseover = function() {alert('Hello')};
</script>
</body>
</html>
You need to put it in a function like so.
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<a>dasdasd</a>
<p id="k">as</p>
<script type="text/javascript">
document.getElementById("k").onmouseover = function(){alert('Hello')};
</script>
</body>
</html>
try to add onmouseover="mouseover()" in <p>
function mouseover() {
alert('Hello');
}
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<a>dasdasd</a>
<p id="k" onmouseover="mouseover()">as</p>
<script type="text/javascript">
function mouseover() {
alert('Hello');
}
</script>
</body>
</html>
The issue is, the () after the alert function causes the function invocation on page load and you see the alert. Call the function inside of an anonymous function which will ensure that the function will be called only when the event (onmouseover) is fired:
document.getElementById("k").onmouseover = function(){alert('Hello')};
<a>dasdasd</a>
<p id="k">as</p>
Try this (with JQuery):
$(document).ready(function(){
$("p").mouseover(function(){
alert("Hello");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
</body>
</html>
How do I use a alert to stop a link from going to the page? I've been trying to figure it out but it's sending me to the link anyways
<!DOCTYPE HTML>
<html>
<head>
<title>Do Not Click</title>
<meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript">
function confirm_alert(node) {
return confirm("STOP CLICKING THE LINK");
}
</script>
Don't click link
</body>
</html>
Just return false from the confirm_alert function.
<!DOCTYPE HTML>
<html>
<head>
<title>Do Not Click</title>
<meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript">
function confirm_alert(node) {
confirm("STOP CLICKING THE LINK");
return false;
}
</script>
Don't click link
</body>
</html>
You can pass the param event and execute the function .preventDefault()
<!DOCTYPE HTML>
<html>
<head>
<title>Do Not Click</title>
<meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript">
function confirm_alert(node, e) {
e.preventDefault();
return confirm("STOP CLICKING THE LINK");
}
</script>
Don't click link
</body>
</html>
A better approach is binding the event click:
document.querySelector('a').addEventListener('click', confirm_alert);
function confirm_alert(e) {
e.preventDefault();
return confirm("STOP CLICKING THE LINK");
}
Don't click link
Put the redirect in the js function. Put a check in it for showing the alert or for going to the url.
Something like this:
window.location.href = "http://stackoverflow.com";
Not sure tho. Not tested it.
What is diffrent between these syntax please Explain in details?
$(document).on("click", "#index1", function() {
$(p).hide();
});
$("#index2").on("click", "#index1", function() {
$(p).hide();
});
$("#index1").on("click", function() {
$(p).hide();
});
In first case you add click listener to "document", but it be executed only if you click at "#index1".
In second - you add listener to "index2" and it will be executed only if you click at "#index1" located inside of "#index2".
In the third case you just add listener to "index1"
Lets imagine a webpage at first.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id='index1'>click me</button>
</body>
</html>
This will work
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id='index1'>click me</button>
<script type="text/javascript">
$("#index1").on("click", function () {
$(p).hide();
});
</script>
</body>
</html>
This won't work, because the element did not exist while the script was executed.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
$("#index1").on("click", function () {
$(p).hide();
});
</script>
<button id='index1'>click me</button>
</body>
</html>
But with a workaround, it would
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
$(document).on("click", "#index1", function() {
$(p).hide();
});
</script>
<button id='index1'>click me</button>
</body>
</html>
This says whenever a click event is fired on the document check if the click was fired on #index1 element. So even if, the element did not exist the callback, is attached to the document node. Now whenever a click is fired on the document it will check if it originated from #index1
Here is my HTML source:
<body>
<iframe id='iframe1' src="http://site1.com/myScript.html"></iframe>
<iframe id='iframe2' src="http://site2.com"></iframe>
</body>
How can I (in myScript.html page) change the src of iframe ?
(or navigate to site3.com)
myScript.html;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function navigateIFrame2() {
// code to change the url or navigate iframe2
}
</script>
</body>
</html>
$('#iframe2', window.parent.document).attr("src" "new url");
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#myiframe')[0].document.execCommand('SaveAs',false,'somexml.xml');
});
</script>
</head>
<body>
<iframe id="myiframe" src="somexml.xml" frameborder="0"></iframe>
</body>
</html>
I know that execCommand only works in IE, but i cant get this to work. All I want is a "save as" dialog, with the iframe content beeing saved. So I want to run the function in the iframe, not on the "main" page.
Thanks
Try this:
var oIframe = $('#myiframe')[0];
var oDoc = oIframe.contentWindow || oIframe.contentDocument;
if (oDoc.document) {
oDoc = oDoc.document;
}
oDoc.execCommand('SaveAs',false,'somexml.xml'); // this line will work only in IE
See this link for getting the document object of an iframe correctly: http://xkr.us/articles/dom/iframe-document/