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?
Related
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.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</head>
<body>
<h1 id="popup">dfdfs</h1>
</body>
</html>
i have a simple javascript which shows alert when the h1 id exits ,but i am not getting the alert message.code in jquery also can help.
Put your <script> tag at the end of the body:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Write your script after the element so that it runs after element is present. See the code:
<!DOCTYPE html>
<html>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Plunkr for the same is: "http://plnkr.co/edit/0fznytLHtKNuZNqFjd5G?p=preview"
Because, you're executing the script before document is completely loaded, the element #popup is not found.
Use DOMContentLoaded
Use DOMContentLoaded to check if the DOM is completely loaded.
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
if (document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
Using jQuery ready
Using jQuery, you can use ready method to check if DOM is ready.
$(document).ready(function() {
if ($("#popup").length) {
window.alert("hi");
}
});
Moving script to the end of body
You can move your script to the end of body.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
// Move it here
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Your script is above the h1 element that you're trying to retrieve. Because of this, it is being run before the element actually exists.
Either move the script to the bottom of the page, or wrap it in a jQuery ready block. And consider moving it to an external file.
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
try this easy way. no need of jquery.
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if(document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
It is good practice to use the <script> tags in <body> because it improves the performance by loading it quicker.
And then use
<body>
<script>
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
</body>
Below code gives you solution
$(document).ready(function() {
if (document.getElementById("popup")) {
window.alert("hi");
}
});
I copied 3 lines of code from Vimeo, and Chrome's javascript debugger says they cause an undefined error. It tries to do a 'split' on an element that does not exist. Here is the 3 lines of script, plus all the html, since its obviously very short. Any help is appreciated.
<!DOCTYPE html >
<html>
<head><meta http-equiv="Content-Type" content="Type=text/html; charset=utf-8" /><title>
</title><link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/sunny/jquery-ui.css" /><link href="/Styles/common.css" rel="stylesheet" type="text/css" />
<script src='/Scripts/utilities.js' type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
var f = $('iframe'),
url = f.attr('src').split('?')[0],
status = $('.status');
</script>
</head>
<body>
<center>
<table><tr><td>
<div id="ContainPlayer" style="position:relative;">
<iframe src="//player.vimeo.com/video/79036140?autoplay=1&api=1"
player_id="vimeoplayer" id="vimeoplayer"
width="1000" height="454"
frameborder="0" ></iframe>
</div> </td>
</tr></table>
</center>
</body>
</html>
This is because you put the javascript before content is loaded, before the page is rendered. Move the script code after the iframe or put the block in a domready event.
$(function(){
var f = $('iframe'),
url = f.attr('src').split('?')[0],
status = $('.status');
});
You have to wrap your code in $(document).ready(function () {});
Either write your code...
$(function() {
here
})
or before the closing body tag.
The problem is that your script is executed before the html is rendered.
EDIT I Found the solution! credit goes entirely to the assistance I received from Mixel. For those who find themselves in the same predicament of needing to pull a div from an iframe without using onload here is the entire working code that I am using:
<html>
<head>
<title>Main page</title>
<style type="text/css">#hiddenframe {display:none;}</style>
<script type="text/javascript">
window.onload = function () {
var myUrl = "test.html"
document.frames['hiddenframe'].location.href = myUrl;
}
</script>
</head>
<body>
<div id="parent-div"></div>
<iframe id="hiddenframe"></iframe>
</body>
</html>
And the Child Page:
<html>
<head>
<title>Child Page</title>
<script type="text/javascript">
window.onload = function () {
parent.document.getElementById('parent-div').innerHTML = document.getElementById('daughter-div').innerHTML;
}
</script>
</head>
<body>
<div id="daughter-div">
This is the Child Div!
</div>
</body>
</html>
Thank you once again to Mixel for his help and patience in finding a solution
That's because you reload hiddenframe in onload handler. Reloading triggers onload event, then onload handler reloads hiddenframe. And this happens again and again...
Edit:
May be I do not understand what you want to do in your code, but if you want to load iframe when parent window is loaded you need this:
window.onload = function () {
document.getElementById('hiddenframe').setAttribute('src', 'test.html');
}
And there is window.onload handler of test.html page:
window.onload = function () {
parent.document.getElementById('parent-div').innerHTML = document.getElementById('daughter-div').innerHTML;
}
Edit2:
That's html of main page:
<div id="parent-div"></div>
<iframe id="hiddenframe">
</iframe>
And that's test.html:
<div id="daughter-div">
Child div!
</div>
I have an Iframe.html file :
<body onload="alert('frame 1 loaded');">
<div> This is frame 1 content </div>
<a id="a1" href="Sample.html"> click</a>
</body>
Sample.html
<body>
<ul id="list1">
<li name="one">one</li>
<li name="two">two</li>
</ul>
And I calling the iframe form test.html file :
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var i=10;
$("#frame1").ready(function () {
$('#frame1').contents().find('#a1').click(function() {
alert("Hello");
$('#frame1').attr('src', $('#frame1').contents().find('#a1').attr("href"));
$('#frame1').load();
});
$('#frame1').contents().find('#a1').click();
</script>
</head>
<body onload="handleMainOnload();">
<!--iframe id="frame1" src="about:blank"/-->
<iframe id="frame1" src="iframe.html"/>
</body>
Now I tried using the content of URL loaded in iframe i.e. Sample.html in test.html as follows :
$('#frame1').contents().find('#list1 li[name=one]').click(function() {
alert(" Clicking list....");
});
$('#frame1').contents().find('#list1 li[name=one]').click();
But this doesn't work.. Can you please tell me From Test.html how to access Sample.html file content like(id,name,class etc.) which is loaded in iframe.html using JQuery.
Please help.
Thanks
Kamakshi
To access any document inside an iframe included inside an HTML take for example the following page:
<html>
....
<body>
<iframe id='myFrame' name='myFrame' src='someUrl'>
</body>
</html>
You can access using the following script
myFrame.document.getElementById('elementID');
Make sure you provide a name (here: myFrame) that is used to access the frame itself.
The elementID is the id of any element inside the html/url loaded inside the iframe
<html>
<head>
<title>Main Frame 2 Title </title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
------
------
alert("frame ready");
var $value1 = $frame.contents().find('#list1 li[name=one]').html() ;
alert("loaded + " + $value1);
$frame.contents().find('#list1 li[name=one]').click(function() {
alert("About + clicked");
});
$frame.contents().find('#list1 li[name=one]').click();
}); });
</script>
</head>
<body>
<iframe id="frame1" src="sample.html" />
This works fine, if i am giving iframe src=sample.html directly instead of redirecting using another file (i.e. src=iframe.html) and keeping Sample.html in same domain as parent file (test.html).