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'
});
});
}
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.
When I click the link "show pdf" I want to display the embeded pdf. However there must be something wrong. The pdf will now load. Some help?
Check out my fiddle: http://jsfiddle.net/benjones337/7jkmvLL9/2/
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset=utf-8 />
<script type="text/javascript">
window.onload = function() {
document.getElementById("showPDF").onclick = function() {
document.getElementById("thePDF").style.visibility = "visible";
}
}
</script>
</head>
<body>
<div>
<object data="http://www.elml.org/website/en/download/gitta_databases.pdf" type="application/pdf">
<embed id="thePDF" src="http://www.elml.org/website/en/download/gitta_databases.pdf" width="700" height="575" type="application/pdf" />
</object>
<p><a id="showPDF">Show PDF</a></p>
</div>
</body>
</html>
Avoid using onload event in jsfiddle as this event already happened when the page is "loaded".
Hide the object itself (I moved your id to the parent element) as the embed element is not affected with your style.
jsfiddle.net/7jkmvLL9/6/
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.
I know this has been mentioned multiple times, but I can't find exactly what I'm looking for.
Index.html code.
<html>
<head>
<meta charset="utf-8">
<title>myPage</title>
<script src="libs/h5.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="content" width="1025" height="670">
<iframe id="homePage" src="pages/homepage.html" width="1025" height="670" seamless></iframe>
</div>
</body>
</html>
h5.js code
function setTextHidden()
{
<------------ **How do I call the hideText function inside the iframe from the parent?**
}
js code for homepage.html in iframe
function hideText()
{
console.log("hideText");
}
You can use window.frames property to access the window object of your iFrame, from which you can call hideText:
function setTextHidden() {
window.frames[0].hideText(); // assuming this is the first iframe on your page
}
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.