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">
Related
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.
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'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();
}
I try to capture onkeydown event in a window wich contains a iframe containing mutliple framset :
top.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> top.html </title>
</head>
<body>
<iframe frameborder="0" border="0" width="100%" height="100%" src="framset1.html" id="framset1"></iframe>
</body>
framset1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET rows="66,*" border="0">
<FRAME scrolling="no" id="frame1" name="frame1" src="frame1.html">
<FRAME id="framset2" name="framset2" src="framset2.html">
</FRAMESET>
</HTML>
framset2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="46,*" border="0">
<FRAME scrolling="no" id="frame2" name="frame2" src="frame2.html">
<FRAME id="frame3" name="frame3" src="frame3.html">
</FRAMESET>
</HTML>
I want to capture event onkeydown in frame3. I have found a relative question on stackoverflow here but applied without succes.
Do i have to continue on this way or anyone can help me.
Thanks.
Paul
If you want to assign the event listener in the top frame (top.html):
document.getElementById('framset1').contentDocument.getElementById('framset2').contentDocumentcontentDocument.getElementById('framset3').contentDocument.addEventListener('keydown', function(e) {
alert('keydown in frame 700');
}, false);
This only works if all frames are on the same domain + port. Otherwise you'll get a security exception trying to access document.getElementById('framset1').contentDocument.
But frames within frames within frames... Is that what you really want??
I have iframe that cointains some javascript that should fire on body load,while iframe works fine when embedded on plain HTML page,when integrated in blogger HTML/javascript widget,javascript in iframe don't work..suggestions.Tried only in Firefox bc viruses and toolbars eaten IE?
Iframe Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript">
function change() {
var text = "someaddress";
window.location = "http://something.com/fb2.aspx" + "?url=" + text;
}
</script>
</head>
<body bgcolor="#333333" onload="change()">
</body>
</html>
Code of HTML/javascript widget on Blogger Blog
<iframe scrolling="no" src="http://something.com/fb.htm" width="200" height="70"
frameborder="0" name="myInlineFrame"></iframe>
And sam iframe embedded in this plain HTML page executes javascript as it should
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Stats page</title>
</head>
<body>
<iframe src="fb.htm" runat="server" id="iframe1" width="500" height="500"></iframe>
</body>
</html>
Behind the scenes, it appears that the Blogger Widget/Gadget system is using a method of adding code to the DOM that precludes the execution of any JavaScript. Oftentimes, this can happen if content is added by appending it to the .innerHTML object. The DOM element is rendered, but any included JavaScript does not execute.
A workaround for this is outside the scope of this question, because it's a blogger issue.
The solution for you is to edit the Blogger template directly, and paste your IFRAME where you would like it to appear in the template itself. In other words, don't use a widget.
Below is a portion of my own Blogger Template with an iframe right before the closing body element:
</div>
</div>
</div>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<!-- Iframe in template -->
<iframe scrolling="no" src="http://somedomain.com/fb.htm" width="200" height="70"
frameborder="0" name="myInlineFrame"></iframe>
<!-- Iframe in template -->
</body>
<macro:includable id='sections' var='col'>
<macro:if cond='data:col.num == 0'>
<macro:else/>