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??
Related
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?
It is a long time since I programmed web. How do I perform javascript frameset navigation (or replace the frameset with an exact equivalent):
<frameset rows="*,32">
<frame src="about:blank" id="viewer">
<frame src="cgi/browse.exe?images">
</frameset>
The webpage generated by browse.exe conains an javascript array with a list of files, and two buttons: previuos and next. When the user clicks next, next file should be displayed in the "viewer".
I have tried
parent.frames["viewer"].location.assign("...");
without success in FF. It works in IE. Note that the navigation works fine as long as I stay inside the same frame.
Try to replace the id with the name attribute, then it should work well in all browsers. Tested it on these pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index.html</title>
</head>
<frameset cols="240,*">
<frame name="fmenu" src="leftmenu.html" scrolling="yes"/>
<frame name="viewer" src="page1.html" scrolling="yes"/>
<noframes><p>noframes</p></noframes>
</frameset>
</html>
<!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>leftmenu.html</title>
</head>
<body>
<a onclick="window.parent.frames['viewer'].location.assign('page2.html')">test</a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page1,2.html</title>
</head>
<body>
<p>START PAGE</p>
</body>
</html>
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();
}
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/>