I want to disable right click on iframe but my code is not working. any fix for this code or any alternate to disable right click on iframe pdf?
<html>
<head>
<title>Disable Context Menu</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/jscript">
$('#myiframe').bind('contextmenu', function(e) {
return false;
});
</script>
</head>
<body >
<iframe id="myiframe" src="dummy1.pdf" width="528" height="473"
></iframe>
</body>
</html>
<script type="text/javascript">
$('#myiframe').on('contextmenu', function() {
return false;
});
</script>
Also, try using the latest version of jQuery. The latest version of jQuery is 3.5.1.
Related
I want to prevent copying content loaded in iframe. I am using the following code [per this answer], and it works fine.
<html>
<head>
<title>Test</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
$(window).load(function () {
var $frame = $("#tif");
$frame.contents().bind("copy", function (e) {
e.preventDefault();
});
});
</script>
</head>
<body>
<iframe src="whatever.com" height="768" width="1366" id="tif"></iframe>
</body>
</html>
But when a pdf file is given as the source, the above code fails. Any suggestions?
I just started to go further in my web development skills in my job and stucked with a little problem.
I have an iFrame (iframe.html), and in this iframe is a div styled as a green square.
I want to change the color of the Div outside the iframe with a button in my Parent (index.html) with an onClick Function.
I tried a few things, like calling a normal Function (document.getElementById and so on). But nothing really worked.
So I thought, that jquery might have some solutions and I'm stucked now in this code, but it doesn't work.
Can anyone help?
PS: this is not a cross-origin case. i got both html files in the same Directory.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="jquery-1.12.2.min.js"></script>
<title>buttonframetest</title>
<script type="text/javascript">
function Clickit() {
$(document).ready(function(){
$('iframe').contents().find('background-color').css('backgroundColor', 'white');
});
}
</script>
</head>
<body>
<iframe id="iframe" src="iframe.html" width="500px;" height="500px">
<p>iFrame nicht darstellbar in deinem Browser</p>
</iframe>
<br>
<button type='button' onClick="Clickit();">Klick</button>
<button type="button" onclick="redy">CHANGE</button>
<br>
<div class="ChangeColor"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
This can be done with the DOM iframe object's contentDocument property:
document.frames[0].contentDocument.getElementById('id here').style['background-color']=whatever;
Or, alternatively, with window.postMessage:
// this is in parent
document.frames[0].postMessage('red', '*');
// this is in frame
window.onmessage = function(x) {
if (x.origin == 'http://www.example.com') document.getElementById('id here').style['background-color'] = x.data;
}
Add this,
Update your jQuery CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
function clck(){
$(document).ready(function(){
$('iframe').css({
'background' : '#fff'
});
});
}
Im trying to redirect to another html page on load of one page. Below is my code (I want to automatically load 2.html when i open 1.html)
P.S: I could not use window.location.href because of specific use case
1.html
<html>
<head>
<script src="jquery-2.1.1.min.js"></script>
<script type = "text/javascript">
$( document ).ready(function() {
//$("#second")[0].click();
document.getElementById("second").click();
});
</script>
</head>
<body>
<a href = "2.html" id="second"/> click </a>
</body>
</html>
I tried $("#second")[0].click() and document.getElementById("second").click(). Both works fine in desktop browsers. But in android Both doesn't seems to work.
Do we have any ways to achieve it ? Please Help
Use this code.
Solution 1
<script>
function newPage() {
window.location.assign("http://www.adarshkr.com")
}
</script>
Solution 2
<script>
var url = "http://stackoverflow.com";
$(location).attr('href',url);
</script>
Thanks to #mod and #samsad. I resolved it in the following way,
<html>
<head>
<script src="jquery-2.1.1.min.js"></script>
<script type = "text/javascript">
window.onunload = function(){};
$( document ).ready(function() {
history.pushState({}, "", "1.html");
var url = "2.html";
window.location.assign(url);
});
</script>
</head>
<body>
<a href = "2.html" id="second"/> click </a>
</body>
</html>
I put it all in one page and it should work and is not working:
<html>
<head> <link href="css_js/styles.css" rel="stylesheet" type="text/css">
<script language="JavaScript1.2" src="css_js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" src="css_js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" type="text/javascript">
function popup() {
alert('test');
var popup = $('.newpopup');
popup.draggable();
popup.resizable();
popup.html('<p>Where is pancakes house?</p>');
popup.show('fast');
}
$('button').click(popup);
</script>
</head>
<body>
<div class='newpopup'></div>
<button>popup</button>
</body>
</html>
I want to make a simple popup / dialog with Jquery but it is not working at all. What is wrong with it?
Call the function on document.ready
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
OR
$(function(){
$('button').click(function(){
popup();
});
})
You should run your function in jQuery style:
$('button').click(function() {
popup();
return false; //optional
}
Are you sure the src reference is valid when you're including jquery? I've got your code working fine on this jsfiddle using the Google-hosted versions of JQuery and JQuery-ui.
The site like this:
`--main.html
`--dialog.html
`--folder
`--iframe.html
and the code is here:
main.html:
<html>
<head>
<script type="text/javascript">
function testframe() {
var doc = document.getElementById("frame").contentWindow;
doc.show();
}
</script>
</head>
<body>
<iframe src="folder/iframe.html" id="frame"></iframe>
<br/>
<button onclick="testframe()">test</button>
</body>
</html>
dialog.html:
<html>
<head>
</head>
<body>
This is modal dialog!
</body>
</html>
iframe.html:
<html>
<head>
<script type="text/javascript">
function show() {
showModalDialog('../dialog.html');
}
</script>
</head>
<body>
this is ifram
<br />
<button onclick="show()">show dialog</button>
</body>
</html>
When I click the show dialog button in the ifram,it show the modal dialog correctly.
When I click the test button outside the ifram ,it show the modal dialog incorrectly.
How can I fix this when I click the test button outside the ifram to show the correct page in the dilog?
iframeDomElement.contentWindow.setTimeout(function() {
iframeDomElement.contentWindow.childFunc();
}, 0);
This hack will make the relative path relative to the child window. Works in firefox and chrome，but not in safari.