How to disable iframe right click for every website - javascript

I have a problem about right click for the iframe. I've done it for the default url of the IFrame but when i displayed any other webpage right click can be usable. I have used those sample codes,
document.onmousedown = disableclick;
status = "Right Click Disabled";
function disableclick(event) {
if (event.button == 2) {
return false;
}
}
function disableContextMenu()
{
document.getElementById("myFrame").contentWindow.document.oncontextmenu = function () { return false; };
}
Here is the iframe
<iframe id="myFrame" name="myFrame" width="1603" height="1064" style="border:none;" src="Iframe.aspx" onload="disableContextMenu();" oncontextmenu="return false"></iframe>
I found the css code "pointer-events:none" but i makes the frame unclickable.

include jquery and then apply this
$( document ).ready(function() {
$('#myFrame').on('contextmenu', function(e) {
e.preventDefault();
});
});
thanks
hope this help

Related

javascript onblur / onfocus with iframe not working issues

I use onblur and onfocus function in my page.
But also, I use a iframe into page.
And my problem is onblur and andfocus functions not working together into page if I use a iframe.
I clicked in iframe when onblur function is working.But I dont want this function work if I clicked in iframe. I want to run only work it if user will change browser tab
if I will use hasFocus function and users changes browser tab , this time onblur is not working
my js codes:
var after_title = 'Back to page';
var dafault_title = document.title;
var deg;
window.onblur = function () { document.title = after_title; beep(); deg=setTimeout(check,2000); }
window.onfocus = ()=>(deg)?clearTimeout(deg):null;
function beep() {
var snd = new Audio("data:audio/wav;base64,//uQRAAAAWMSLwUIYAAsYU=");
snd.play();
}
function check()
{
if(document.hasFocus()){
document.title = dafault_title;
return;
}else{
location.href = './index.php';
}
}
<html>
<head>
<title>Demo Page</title>
</head>
<body>
<br><br><br>default page<br><br><br>
<br><br><br><br>
<iframe id="abc" name="abc" frameborder="1" marginwidth="0" marginheight="0" framespacing="0" width="100px" height="100px">
<p>example include page</p>
</iframe>
</body>
</html>
In order to react to tabchange, don't use the blur and focus events, but rather the Page Visibility API instead:
function handleVisibilityChange() {
if (document.hidden) { // equivalent to "blur"
document.title = after_title; beep(); deg=setTimeout(check,2000);
} else { // equivalent to "focus"
if (deg) {
clearTimeout(deg);
}
}
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);

How to keep an iFrame from autoplaying when hitting the back button?

I currently have a webpage with an embed youtube video and image overlay that functions as the "play button." I use JavaScript to play the embed video and hide the image once a user clicks on the image overlay. As far as I know, the only way to do that is to add "&autoplay=1" to the url of the youtube video.
Additionally, I have a form on the webpage that the user can submit to send us information. If the form is submitted correctly, it takes the user to a "thank you" page. The issue lies when the user hits the back button from the thank you page. Since I have added "&autoplay=1" to the iFrame, the video continues to play. I've tried resetting the iFrame src by echoing JavaScript in the else part of the if/else statement that handles the form. Also, I'm not entirely sure about this, but I think the back button fires the .click() method, so I'm not sure how I would prevent against this if it treats everything like a button click. I've been stuck on this for quite some time, and would appreciate some possible direction. I'm also starting to believe what I want to achieve may not be entirely possible.
Relevant code:
<?PHP
if(isset($_POST['submit'])) {
if($error) {
// handle form error
}
else {
// mails the form
header("location:http://mywebsite.com/thank-you");
}
}
?>
<html>
<body>
<div id="video-thumbnail">
<img id="video-image" src="norman.png" class="video-image" alt=""/>
<iframe id="video-embed" class="video-embed" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&color=white&controls=1&loop=1&showinfo=0" s8011508427261248624="true" replaced="true" ></iframe>
</div>
<script>
(function($){
$(document).ready( function(){
$(".video-image").click(function(){
$(".video-embed").css({"opacity":"1","display":"block"});
$(".video-embed")[0].src += "&autoplay=1";
$(this).unbind("click");
});
} );
})(jQuery)
</script>
</body>
</html>
You may detect if back button has been pressed: if so do not set autoplay to your video.
var backButtonPressed = false;
$(function () {
if (window.history && window.history.pushState) {
window.history.pushState('forward', null, './#forward');
$(window).on('popstate', function () {
backButtonPressed = true;
});
}
$(".video-image").click(function () {
$(".video-embed").css({"opacity": "1", "display": "block"});
// test if back button pressed
if (backButtonPressed == false) {
$(".video-embed")[0].src += "&autoplay=1";
}
$(this).unbind("click");
});
});
I have solved my own question, with the help of gaetanoM. His answer was fine, it was just missing one line needed to reset the iFrame src at the start of the function to get rid of "&autoplay=1"
var backButtonPressed = false;
$(function () {
$(".video-embed")[0].src = "https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&color=white&controls=1&loop=1&showinfo=0";
if (window.history && window.history.pushState) {
window.history.pushState('forward', null, './#forward');
$(window).on('popstate', function () {
backButtonPressed = true;
});
}
$(".video-image").click(function () {
$(".video-embed").css({"opacity": "1", "display": "block"});
// test if back button pressed
if (backButtonPressed == false) {
$(".video-embed")[0].src += "&autoplay=1";
}
$(this).unbind("click");
});
});

Determine If Print/Cancel Button in Google Chrome's Print Preview is Clicked

I've been printing my page using the code below:
window.print();
An image below is what the print preview in Google chrome browser looks like. It has two main buttons: print and cancel.
I want to know if the user has clicked the print or cancel buttons. What I did uses jquery:
HTML Code of the Print Preview:
<button class="print default" i18n-content="printButton">Print</button>
<button class="cancel" i18n-content="cancel">Cancel</button>
Jquery Code:
$('button > .cancel').click(function (e) {
alert('Cancel');
});
$('button > .print').click(function (e) {
alert('Print');
});
I tried the code above with no luck. What am I missing?
You can not access Chrome's internal windows (printing dialog in this case) directly from a regular web page.
(function () {
var beforePrint = function () {
alert('Functionality to run before printing.');
};
var afterPrint = function () {
alert('Functionality to run after printing');
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function (mql) {
//alert($(mediaQueryList).html());
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
}());
Or, If you want to do something when the print preview gets opened, you can try below:
$(document).bind("keyup keydown", function (e) {
if (e.ctrlKey && e.keyCode == 80) {
setTimeout(function () { CallAfterWindowLoad();}, 5000);
return true;
}
});
function CallAfterWindowLoad()
{
alert("Open and call");
}
Reference:
How to capture the click event on the default print menu called by Javascript window.print()
Maybe if you provide your requirements for this two buttons click event, we can provide you an alternate solution.
it is very easily possible:
<body onafterprint="myFunction()">
The myFunction() that you can define within a tag will be fire when either the printing job is done or the cancel button was pressed.
As far as I know, the print preview is not part of any document your JS can access. These might interest you:
Detecting browser print event
ExtJS 4 - detecting if the user pressed "Print" on the print dialog that was called programatically
<script>
window.print();
onafterprint = function () {
window.location.href = "index.html";
}
</script>
This should do the trick. I've used jQuery v2.2.0 which is included in the html file.
$("#print").click(function() { // calls the id of the button that will print
document.body.style.visibility = 'hidden'; //code for hiding the body
document.getElementById('printthis').style.visibility = 'visible'; // div to be printed
document.getElementById('printthis').style.position = 'absolute'; //some code/css for positioning. you can adjust this
document.getElementById('printthis').style.top = '40px';
document.getElementById('printthis').style.left = '0px';
if (print()) { // shows print preview.
} else { // else statement will check if cancel button is clicked.
document.body.style.visibility = 'visible';
document.getElementById('printthis').style.position = '';
document.getElementById('printthis').style.top = '';
document.getElementById('printthis').style.left = '';
alert("Print Canceled");
}
});
I guess this might as well be used as a way to print certain divs in your html. Just hide the body element and only show the div that you want to print with some positioning css. Hope it works in yours. I've tried it and I can say that it worked for me.

Disable link after child window is open, restore once child window is closed

My client has a link on their website which opens a customer service chat window in a popup. They are seeing users clicking the chat link multiple times, which opens multiple chat sessions, and it is throwing off their stats. I need to disable the link when the chat window is opened, and restore it when the chat window has been closed. I can't modify/access child window.
The original link looks like this:
<a class="initChat" onclick="window.open('https://chatlinkhere.com','chatwindow','width=612,height=380,scrollbars=0'); return false;">
I figured the best thing to do would be to store the window.open() as a variable in a function:
function openChat() {
child = window.open('http://www.google.com', 'chatwindow', 'width=612,height=380,scrollbars=0,menubar=0');
}
and change the link HTML to
<a class="initChat" onclick="openChat();">
Note: Ideally, I'd like to detect the original onclick's value, and store it in a variable. Something like:
jQuery('.initChat').find().attr('onclick');
But I'm not sure how to store it and then call it later.
Next I need to run a check to see if the chat window is open or not:
timer = setInterval(checkChild, 500);
function checkChild() {
if (child.open) {
alert("opened");
jQuery(".initChat").removeAttr("onclick");
jQuery(".initChat").css("opacity", ".5");
clearInterval(timer);
}
if (child.closed) {
alert("closed");
jQuery(".initChat").attr('onclick', 'openChat(); checkChild();');
jQuery(".initChat").css("opacity", "1.0");
clearInterval(timer);
}
}
Note: the alerts are just there for testing.
And add the new function to the link
<a class="initChat" onclick="openChat(); checkChild();">
And once the chat window is closed, I need to restore the onclick attribute to the link (is there an easier way to do this?)
Fiddle demo is here -> http://jsfiddle.net/JkthJ/
When I check Chrome Console I'm getting error
Uncaught TypeError: Cannot read property 'open' of undefined
UPDATE
Whoever left me the answer in http://jsfiddle.net/JkthJ/2/ thank you very much it works! :)
i think you need is open pop up if already open then foucus on pop up or noyhing should happen
you can rewrite your function as
var winPop = false;
function OpenWindow(url){
if(winPop && !winPop.closed){ //checks to see if window is open
winPop.focus(); // or nothing
}
else{
winPop = window.open(url,"winPop");
}
}
just do it in a simple way. disable the mouse events on anchor link after child window open.
css
.disableEvents{
pointer-events: none;
}
js
var childWindow;
$('a').on('click',function(){
childWindow = window.open('_blank',"height:200","width:500");
$(this).addClass('disableEvents');
});
if (typeof childWindow.attachEvent != "undefined") {
childWindow.attachEvent("onunload", enableEvents);
} else if (typeof childWindow.addEventListener != "undefined") {
childWindow.addEventListener("unload", enableEvents, false);
}
enableEvents = function(){
$('a').removeClass('disableEvents');
};
update
your child window is plain html page. Do the changes in child window html code:
<html>
<head>
<script>
function myFunction()
{
window.opener.enableEvents(); //it calls enableEvents function
}
</script>
</head>
<body onunload="myFunction()">
<!--your content-->
</body>
</html>
This is what I got to finally work:
<a class="initChat" onclick="checkWin()"></a>
<script>
var myWindow;
function openWin() {
myWindow = window.open('https://www.google.com', 'chatwindow', 'width=612,height=380,scrollbars=0');
}
function checkWin() {
if (!myWindow) {
openWin();
} else {
if (myWindow.closed) {
openWin();
} else {
alert('Chat is already opened.');
myWindow.focus();
}
}
}
</script>

Alert when iframe url changed

This script runs every 2 seconds and detect if the url of the iframe is changed. But I can't get it to work. I want to alert if the url of the iframe is changed. For example if someone clicks a link and go another page on the iframed content.
var prevSrc = "http://www.bodrumlife.com";
function check() {
var curSrc = $('#iframe').attr('src');
if (curSrc != prevSrc) {
alert("hobaa");
prevSrc = curSrc;
}
}
window.setInterval(check, 2000); // 2 seconds
<iframe id="iframe" name="iframe" src="http://www.bodrumlife.com"></iframe>
If you prefer to use JQuery below is the following syntax, instead of using half-jquery and standard javascript.
$(function(){
$('#iframeId').load(function() {
alert("the iframe has changed.");
});
});
Although I'm not sure if the onload function works in Sarafi. It's supported by Firfox, IE and Chrome.
EDIT:
extended example
<script type="text/javascript">
$(function () {
var intialFrameSrc = "http://www.twiij.com";
$("#iframeContentPanel").load(function () {
if (intialFrameSrc != $("#iframeContentPanel").attr('src')) {
alert("the iframe has changed.");
}
});
$("#btnChangeUrl").click(function () {
$("#iframeContentPanel").attr("src", "http://m.smh.com.au/");
});
});
</script>
<iframe id="iframeContentPanel" name="iframeContentPanel" src="http://www.twiij.com" width="500" frameborder="0" height="500" scrolling="no"></iframe>
<input type="button" id="btnChangeUrl" value="Change Url"/>

Categories