How to call and running function javascript in frame one from other frame.
This is my script :
My main code:
<frameset id="tes" rows="60,*">
<frame id="frame2" src="../oneframe.php" frameborder="0" allowtransparency="true" marginwidth="0" marginright="0"></frame>
<frame id="frame1" src="../twoframe.php" frameborder="0"></frame>
</frameset>
oneframe.php :
<button type="button" onClick="runFunc()">Running</button>
twoframe.php:
<html>
<head>
<title>tes</title>
<script>
function runFunc() {
var x = document.getElementById('target');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="target">This is my target</div>
</body
</html>
Anyone can help me ?
Related
I need help with making a hint button that hides then shows. Here is my code so far but it shows then hides. I can not figure out how to make it hide then show
<!DOCTYPE html>
<body>
<button onclick="myFunction()">HINT</button>
<div id="Hint">
<p>The hint</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("Hint");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
Just hide the div first :) .
<div id="Hint" style="display: none;">
<p>The hint</p>
</div>
<!DOCTYPE html>
<html lang="en">
<body>
<button onclick="myFunction()">HINT</button>
<div id="Hint" style="display: none;">
<p>The hint</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("Hint");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
I have tried to create custom start and stop in youtube video.Its working fine in reference fiddle reference link
I have tried in html file.Its not working in html file,I have given my code below
<html>
<head>
<script>
/*call player*/
function callPlayer(frame_id, func, args) {
if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
var iframe = document.getElementById(frame_id);
if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
iframe = iframe.getElementsByTagName('iframe')[0];
}
if (iframe) {
// Frame exists,
iframe.contentWindow.postMessage(JSON.stringify({
"event": "command",
"func": func,
"args": args || [],
"id": frame_id
}), "*");
}
}
</script>
</head>
<body>
<div id="whateverID" class="video-container"><iframe width="640" height="390" id="yt" frameborder="0" title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe></div>
<div id="playButton" class="playVideo">Play button</div>
<div class="close_icon" >Pause close</div>
</body>
</html>
it sounds like your page didnt finish to load before the script start,
try to cut your script tag and move it to the end of the body like that(so your page will load first and then your script will load) :
<html>
<head>
</head>
<body>
<div id="whateverID" class="video-container"><iframe width="640" height="390" id="yt" frameborder="0" title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe></div>
<div id="playButton" class="playVideo">Play button</div>
<div class="close_icon" >Pause close</div>
<script>
/*call player*/
function callPlayer(frame_id, func, args) {
if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
var iframe = document.getElementById(frame_id);
if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
iframe = iframe.getElementsByTagName('iframe')[0];
}
if (iframe) {
// Frame exists,
iframe.contentWindow.postMessage(JSON.stringify({
"event": "command",
"func": func,
"args": args || [],
"id": frame_id
}), "*");
}
}
</script>
</body>
</html>
What is the jQuery selector I need to access username from within main.html? The alert should say "Bob".
main.html
<head>
<script>
alert(username); // *** not working ***
</script>
</head>
<frameset>
<frame name="left" src="left.html">
<frameset>
<frame name="top" src="top.html">
<frame name="right" src="right.html">
</frameset>
</frameset>
right.html
<head>
<script>
var username = 'Bob';
</script>
</head>
Use the contentWindow property.
Example:
document.getElementById('frame_id').contentWindow.$('#' + idOfElementInFrame);
Note: this works for iframe tags. It should work for frame tags as well, but given that the frame tag is deprecated, you could have issues.
There is an example:
(1)mainpage:
<html>
<script>
function show(){
var winleft = window.frames["left"];
alert(winleft.username);
}
</script>
<frameset cols="25%,50%,25%">
<frame src="left.html" name="left">
<frame src="left.html" name="middle">
<frame src="left.html" name="right">
</frameset>
</html>
(2)left.html
<head>
<script>
var username = 'Bob';
</script>
</head>
(3)why?
Every frame has its own Object "window",
you should get the "window" object of the frame["left"],and the variable "username" is the proterty of the frame["left"]'s window(winleft) object.so,you can get the value of username.
I want to make 4 channel in my website, but I want to make start for the first channel automatically and after 5 second start the second channel ... etc
code of channel
The Code
window.addEventListener("load", function() {
var interval = setInterval(function() {
iframes[++n].src = urls[n - 1];
iframe[n].style.display = "block";
console.log(n);
if (n === iframes.length -1)
{
clearInterval(interval); console.log("all iframes loaded")
}
},
5000)
})
.channel1, .channel2, .channel3{
display:none;
}
<html>
<head>
<script type="text/javascript" src="js.js"></script>
<link rel="stylesheet" href="css.css">
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe class="channel1" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe class="channel2" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U" frameborder="0" allowfullscreen></iframe>
<iframe class="channel3" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U" frameborder="0" allowfullscreen></iframe>
</body>
</html>
This code doesn't work, I can listen the commutator talk but I cant see the channel why ?
You can set iframe elements 1-4 src to empty string, utilize setInterval to set src of each iframe 1-4 to a url within an array every five seconds until all iframe elements have src set.
window.addEventListener("load", function() {
var urls = ["data:text/plain,b", "data:text/plain,c", "data:text/plain,d"];
var iframes = document.querySelectorAll("iframe");
var n = 0;
var interval = setInterval(function() {
iframes[++n].src = urls[n - 1];
console.log(n);
if (n === iframes.length -1) {
clearInterval(interval);
console.log("all iframes loaded")
}
}, 5000)
})
<iframe src="data:text/plain,a"></iframe>
<iframe src=""></iframe>
<iframe src=""></iframe>
<iframe src=""></iframe>
I have a page with six ifrmaes inside it. Each frame has individual id, so it is easy to detect the frame. All these frames have commono src. And each source I set
window.onload=function(){
alert(' this has been alerted from Iframe with id#");
}
How can I know the ID of the frame from which the alert is alerting?
Thanks.
You can do it like this:
Frameset:
<html>
<body>
<iframe src="frame.html" id="frameID1" name="frameName1"></iframe>
<iframe src="frame.html" id="frameID2" name="frameName2"></iframe>
<iframe src="frame.html" id="frameID3" name="frameName3"></iframe>
<iframe src="frame.html" id="frameID4" name="frameName4"></iframe>
<iframe src="frame.html" id="frameID5" name="frameName5"></iframe>
<iframe src="frame.html" id="frameID6" name="frameName6"></iframe>
</body>
</html>
Frame:
<html>
<head>
<script type="text/javascript">
window.onload=function() {
alert('This has been alerted from frame with id#: ' + GetFrameID(this.name));
}
function GetFrameID(frameName) {
var frames = top.document.getElementsByTagName('iframe');
if (frames != null) {
for (var i = 0; i < frames.length; i++) {
if (frames[i].name == frameName) return frames[i].id;
}
}
return null;
}
</script>
</head>
<body>
</body>
</html>