I have frameset with 3 frames, javascript code is not working unable to understand why?.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="frame/frame1.html" />
<frame name="main" src="frame/frame2.html" />
<frame name="bottom" src="frame/frame3.html" />
</frameset>
<body>
<script>
alert('hi');
var iframe = document.getElementsByTagName('frameset')[0];
iframe.body.style.backgroundColor = 'green'
</script>
</body>
</html>
Since you have not mentioned what exactly is not working, I am going to assume here.
You are calling the wrong HTML tag. You need to get the 'frame' tag and not the 'frameset' tag for retrieving the first iframe.
var iframe = document.getElementsByTagName('frame')[0];
Hope this helps.
Related
First of all, no Jquery and iframe question does NOT solve my question, please don't address to it. i don't even understand that, just started learning javascript today.
I want to change the picture in the right frame by clicking to a button in my head frame
I have tried using contentWindow too, it did not work.
The changing picture script works for same frame, there is a problem in accessing other frames
my javascript version is 1.7
index.html
<!DOCTYPE html>
<html lang="tr" dir="ltr">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<frameset rows="30%, 70%" noresize>
<frame id="head" name="head" src="head.html">
<frameset cols="50%, 50% noresize">
<frame id="left" name="left" src="left.html">
<frame id="right" name="right" src="right.html">
</frameset>
<body>
<script type="text/javascript">
window.frames['head'].document.getElementById('button1').addEventListener('click', () => {
window.frames['right'].document.getElementById('image1').src = ('https://www.planetware.com/wpimages/2020/04/iceland-best-waterfalls-seljalandsfoss.jpg');
})
</script>
</body>
</html>
head.html
<!DOCTYPE html>
<html lang="tr" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Site Title</h1>
<button name="button1" id="button1">Next</button>
</body>
</html>
right.html
<!DOCTYPE html>
<html lang="tr" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="https://learnenglishteens.britishcouncil.org/sites/teens/files/styles/article/public/field/image/rs930_135120665-low.jpg?itok=g5LI5W4C" alt="picture" id ="image1" name="image1">
</body>
</html>
this is how the site looks
how it looks
How to access a element of a frame from other frame. For Ex:
Main.html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<frameset rows="33%,33%,*">
<frame class="fra" src="frame1.html"/>
<frame class="fra" src="frame2.html"/>
</frameset>
</html>
frame1.html:
<html>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</HEAD>
<body>
<b><p id="para"> This is frame one.html </p></b>
</body>
</html>
frame2.html:
<html>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</HEAD>
<body>
<b><p id="para"> This is frame two.html </p></b>
<button id="but"> Get data </button>
<script>
$(document).ready(function(){
$("#but").click(function(){
alert(window.frames[0].document.getElementById('para'));
});
});
</script>
</body>
</html>
Once the button is clicked from frame2 then I need to get the data of "para" id element which is present in frame1. So, I tried to access the element as showed
below. But it is not worked.
window.frames[0].document.getElementById('para')
It shows the error as:
Uncaught TypeError: Cannot read property 'document' of undefined
So, window.frames[0] itself undefined
.Can any one help me to solve this?
You should put id on your iframes, like "iframe1" and "iframe2".
<frame class="fra" src="frame1.html" id="frame1" />
<frame class="fra" src="frame2.html" id="frame2" />
Then:
$(window.parent.document).find("#iframe1").contents().find("#para")
should give you access from iframe2 to the element with id "para" in frame one.
$(window.parent.document) will allow you to return from iframe2 to the main document, then find iframe1, then contents() will allow you to go inside iframe1 where you'll be able to find the "#para" element.
I have an HTML frameset page (don't judge), where I have used some JavaScript (document.write) to display the tag of a frame with a variable:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>
Title
</title>
<script src="script.js">
</script>
</head>
<frameset cols="70%,30%" frameborder="0">
<frame src="site1.html" />
<script>
document.write('<frame src="site2.html?var=' + variable + '" />');
</script>
</frameset>
</html>
So I can't get this to work. The problem is that, now that I've used JavaScript to document.write the tag for a frame, the frame does not show. How is there a way to successfully incorporate this JavaScript in my frameset?
I have the following page with iframes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
alert("test");
elements = document.getElementById("reference").contentWindow.getElementLength();
alert("test2");
</script>
</head>
<frameset cols="20%,*">
<frameset rows="25%,*">
<frame src="./groups.html" name="types">
<frame src="./entities.jsp" name="entities">
</frameset>
<frame src="./reference.jsp" name="reference" id="reference">
</frameset>
</html>
Inside reference.jsp, I have the following code :
<html>
<head>
<script type="text/javascript">
function getElementLength(){
alert("in reference");
elements=document.getElementByClassName("link");
alert(elements.length);
}
</script>
</head><body>...</body></html>
I checked earlier StackOverflow posts about using Javascript across frames and found that contentWindow does the trick but in this case, I only get first alert - "test" and the frame with id="reference" is never reached. I see the following error in Firebug:
document.getElementById("reference") is null
elements = document.getElement...").contentWindow.getElementLength();
Is there something I am missing, this seems to be a very straighforward usecase.
I think that the problem is that your script is executing before the frame is loaded ...
You could do the following to ensure the frame is loaded before the script is executed :
<script type="text/javascript">
function load() {
alert("test");
elements = document.getElementById("reference").contentWindow.getElementLength();
alert("test2");
}
</script>
<frameset cols="20%,*">
<frameset rows="25%,*">
<frame src="./groups.html" name="types">
<frame src="./entities.jsp" name="entities">
</frameset>
<frame src="./reference.jsp" name="reference" id="reference" onload="load()">
</frameset>
I have added the onload="load()" attribute in the frame reference and wrapped your script in the load() function. This will cause the code to be executed once the reference frame is loaded.
Your document type is transitional which isn't support the framset
try the below document type tag
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
I'm not sure if this is possible, but I'm trying to get the HTML page below (that has Frameset/Frames) to resize (the width and height), remove menubar, toolbar & scrollbar onload via JavaScript. I've been all through stack and Google to no avail.
This is for an AICC course, so unfortunately it is pertinent that I use the Frameset/Frames.
frameset.htm - Here is the original HTML page:
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset frameborder="0" border="0" framespacing="0" rows="*,1">
<frame src="course.htm" scrolling="0" frameborder="0">
<frame src="results.htm" scrolling="0" frameborder="0">
<noframes>
<body>
<p>This web page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
frameset.htm - Here is the code I thought created that I thought may work, but I think I'm missing something:
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function courseLauncher(theURL,winName,features) {
window.open('','_self','');
window.open(theURL,winName,features);
this.focus();
}
</script>
</head>
<frameset frameborder="0" border="0" framespacing="0" rows="*,1" onLoad="courseLauncher('frameset.htm','course','width=1000,height=700');">
<frame src="course.htm" scrolling="0" frameborder="0">
<frame src="results.htm" scrolling="0" frameborder="0">
<noframes>
<body>
<p>This web page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
The code below opens a window without menubar, scrollbars nor toolbar.
window.open ("","mywindow","menubar=0,scrollbars=0,toolbar=0, width=350,height=250");
so,
courseLauncher('frameset.htm','course','menubar=0,scrollbars=0,toolbar=0,width=1000,height=700')
also fix your courseLauncher function
function courseLauncher(theURL,winName,features) {
var win = window.open(theURL,winName,features);
win.focus();
}