Not able to close the window when serve html template with Flask - javascript

I have an HTML file and js script like below
<html>
<head>
</head>
<body>
some kind of html tags
<script src="https://cdn.jsdelivr.net/npm/jsbarcode#3.11.3/dist/barcodes/JsBarcode.code128.min.js"></script>
<script>
JsBarcode(".barcode").init();
</script>
<script type="text/javascript">
setTimeout(function () {
window.print();
}, 250);
window.onfocus = function () {
setTimeout(function () {
window.close();
}, 250);
}
window.onafterprint = function () {
window.close();
}
</script>
</body>
</html>
auto printing and auto closing after print works well when I open this HTML file with double clicking (not rendering or not serving with Flask). But when I run the flask server and go to the url that rendering this template, closing the window not working. It gives me an error in console like this:
Scripts may close only the windows that were opened by them.
So, how can I solve this?

Related

Detect page change with javascript?

How to detect what page i am being redirected to using javascript.
$(window).on("onbeforeunload",()=>{
alert("Something")
})
This code never executes (despite me reloading the page or clicking on other URLs). I am running my scripts on localhost. Also, i would like to know the URL of the page that i am being redirected to.
This is my full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Practice</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<script>
$(window).unload(()=>{
alert("Something");
})
</script>
Link
</body>
</html>
Maybe you can alert() or do whatever you want and then redirect to the url like the following example?
$('a').on('click', function(e){
e.preventDefault();
let url = this.href;
alert(`You're leaving this page, would be redirected to : ${url}`)
window.location.href = url;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Link1
Link2
In modern browsers(IE8+, FF3.6+, Chrome), you can just listen to the hashchange event on window.
if ("onhashchange" in window) {
alert("The browser supports the hashchange event!");
}
function locationHashChanged() {
if (location.hash === "#somecoolfeature") {
somecoolfeature();
}
}
window.onhashchange = locationHashChanged;

How to disable right click on a hyperlink in page/popup open in Iframe using javascript/jquery?

I need to disable right click on a Anchor tag/hyperlink in page/popup open in iframe using javascript/jquery?
I have below code logic which works when I open page in iframe but not work when I open popup in Iframe by clicking on link within the Iframe page.
In below example when I right-click on Open Popup link its not allowing the right click but when I open popup by clicking Open Popup link it's not working for links in popup.
Any suggestions?
Below sample code snippet for reference -
TestPage.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<title>Test Page</title>
</head>
<body>
<iframe id="sampleIframe" src="PopupPage.html" width="400" height="150"></iframe>
<script language="javascript" type="text/javascript">
$('#sampleIframe').load(function() {
$('#sampleIframe').contents().find('a').each(function() {
$(this).on("contextmenu", function() {
return false;
});
});
});
</script>
</body>
</html>
PopupPage.html
<html>
<head>
<title>Popup Page</title>
</head>
<body>
You are on popup page.
Open Popup
<script language="javascript" type="text/javascript">
function openPopup() {
window.open("LinkPage.html", null,
"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
}
</script>
</body>
</html>
LinkPage.html
<html>
<head>
<title>Link Page</title>
</head>
<body>
Goto Google
Goto Facebook
</body>
</html>
For this to work, you need to include your script to disable the links in the actual iFrame content.
To demonstrate, create a jsfiddle with this code (it will not let me save it to post a link)
This would be your "LinkPage.html"
HTML
Open Popup
JAVASCRIPT
function openPopup() {
window.open("http://jsfiddle.net/t45qvtap/1/show", null,
"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
}
And you will see it working.
Just to explain further, this is the contents of the fiddle that the above code will open in an iFrame, this would be your "PopupPage.html"
HTML
This content is in an iframe
<div>
Goto Google
Goto Facebook
</div>
JAVASCRIPT
$('body').contents().find('a').each(function() {
$(this).on("contextmenu", function() {
return false;
});
});

Click link after focus is returned from print dialog

I have a web page that brings up the print dialog on load. After clicking print (and focus returning to the page) I need a link to be clicked. Does anyone know a way using jQuery or Javascript that I can do this?
This is what I currently have, but it doesn't seem to be working:
<script type="text/javascript">
$(document).ready(function() {
window.print();
$("body").bind("focus", function(){ $("#logout").click() });
});
</script>
try this:
<script type="text/javascript">
$(document).ready(function() {
if (window.print())
location.href = $("#logout").attr('href');
else
location.href = $("#logout").attr('href');
});
</script>
and
<body>
<a id="logout" href="http://www.google.it">Link</a>
</body>

Popup window unload issue

I have one popup window, when user opens and closes popup window simultaneously, it is giving script error. Below code is used in popup window.
<html>
<head>
<script src="../../StaticContent/Scripts/jquery-1.7.2.min.js"
type="text/javascript"></script>
<script src="../../StaticContent/Scripts/jquery-ui-1.8.20.custom.js"
type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function CloseWarning() {
return "Do you want to close the window";
}
function onload()
{
}
</script></head>
<body onbeforeunload="return CloseWarning();" onload="onload();">
//Some html
<script type="text/javascript" language="javascript">
$(document).ready(
function() {
//Some code
});
</script>
</body>
</html>
I have tried degubbing, it is giving error at $(document).ready() line. I think because of closing the popup window before fully loading HTML is causing this problem.
Any clues???
you have ()() as double in the function declaration. change like below.
function CloseWarning(){
return "Do you want to close the window";
}

javascript tag trigger - code position on page

i use that tag to alert me when a tag has been shows up
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.getElementsByTagName('iframe')[0].onload = function() {
alert('loaded');
}
</script>
<iframe></iframe>
</body>
</html>
strange , since this code working :
<html>
<head>
</head>
<body>
<iframe></iframe>
<script type="text/javascript">
document.getElementsByTagName('iframe')[0].onload = function() {
alert('loaded');
}
</script>
</body>
</html>
why the Js need to under the tag to work?
what's the problem here?
Because the code in a script tag is executed immediately. And in the first example the iframe doesn't exist at that time. But what you can do is to wrap you code into an onload (for the main page) event. E.g.:
window.onload = function() {
//your code
}
Then it doesn't matter where the code is placed.
Iframe tag does not exist at the moment you are trying to access it.
You may check that by simply alerting array length, like
alert(document.getElementsByTagName('iframe'));
Have you thought about executing your javascript after the page is loaded? You may use some frameworks like jQuery to facilitate crossbrowser issues. Or just put all your javascript code to the very bottom of body.

Categories