<html><head>
<title>Welcome</title>
<style type="text/css"></style></head>
<frameset border="false" frameborder="O" framespacing="0" rows="0,*" cols="*">
<frame marginwidth="0" marginheight="0" name="frame_rsafp" src="rsa_flash_cookie.html" noresize="true" scrolling="no">
<frameset border="false" frameborder="O" framespacing="0" rows="*,30" cols="*">
<frame marginwidth="0" marginheight="0" name="login_page" noresize="true" scrolling="yes">
#document
<html>
<form name="frmLogin" action="entry" class="login" method="post" target="_top" autocomplete="off">
<span class="passfield">
<input type="text" name="LoginUserId" onkeypress="return fSubmit(event);" value="" class="ipassword">
</span>
</form>
</html>
<frame marginwidth="0" marginheight="0" name="footer" src="footer.html" noresize="true" scrolling="no">
</frameset>
</frameset>
</html>
For above html code I want to set value to text field "LoginUserId".
I tried
document.getElementsByName("LoginUserId")[0].value = "MyValue";
but it returns the error Cannot set property 'value' of undefined.
I can only get elements upto "login_page" and count of child elements of "login_page" returns 0.
var ele = document.getElementsByName("login_page")[0].childNodes;
alert(ele.length);
How can I get elements of this nested html document?
Try this
var iframe = document.getElementsByName("login_page")[0];
var ele = iframe.contentDocument || iframe.contentWindow.document;
Try this
var loginBox = document.getElementById('login_page');
var values = loginBox.getElementsByName("LoginUserId")[0].value;
You need to get the iframe first:
var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
and then you can work on that document
if you just want to change the value of the LoginUserId input you can do this:
var inputField = document.querySelector("input[name=LoginUserId]");
inputField.value="test";
Related
I am trying to show or hide a div containing a iframe from another iframe which contains a frameset.
So if you are looking in the code; I am trying to show or hide div "dd" with a function within shades.html. Shades.html is part of a frameset in index2.html which is shown in iframe "UBERFRAME" in index.html.
Some code:
Index.html:
<HTML>
<BODY>
<div style="display:block;position:absolute;top:20px;left:20px;z-index:997;">
<iframe name="UBERFRAME" src="index2.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800; height:480; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
<div id="dd" name="dd" style="position:absolute;top:20px;left:20px;z-index:998;">
<iframe id = "overlayframe" name = "OVERLAY" src="dd.png" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800px; height:480px; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
</BODY>
index2.html:
<HTML>
<FRAMESET ROWS="51,376,53,*" FRAMEBORDER="0" FRAMESPACING="0">
<FRAMESET COLS="70,335,324,71,*" FRAMEBORDER="0" FRAMESPACING="0">
<FRAME SRC="HEADER/home.html" NAME="homeheader" NORESIZE SCROLLING="no">
<FRAME SRC="HEADER/name.html" NAME="nameheader" NORESIZE SCROLLING="no">
<FRAME SRC="HEADER/datetime.html" NAME="datetimeheader" NORESIZE SCROLLING="no">
<FRAME SRC="HEADER/help.html" NAME="helpheader" NORESIZE SCROLLING="no">
</FRAMESET>
<FRAME SRC="mainempty.html" NAME="mainframe2" NORESIZE SCROLLING="no" BORDER="0">
<FRAMESET COLS="69,142,70,316,100,103,*" FRAMEBORDER="0" FRAMESPACING="0">
<FRAME SRC="FOOTER/so.html" NAME="so" NORESIZE SCROLLING="no">
<FRAME SRC="FOOTER/shades.html" NAME="shades" NORESIZE SCROLLING="no">
<FRAME SRC="FOOTER/sendsource.html" NAME="sendsource" NORESIZE SCROLLING="no">
<FRAME SRC="FOOTER/volume.html" NAME="volume" NORESIZE SCROLLING="no">
<FRAME SRC="FOOTER/micmute.html" NAME="micmute" NORESIZE SCROLLING="no">
<FRAME SRC="FOOTER/outmute.html" NAME="outmute" NORESIZE SCROLLING="no">
</FRAMESET>
</FRAMESET>
shades.html:
<HTML>
<HEAD>
<script type="text/javascript">
function showdd() {
window.frames['overlayframe'].style.display = "none";
}
</script>
</HEAD>
<BODY>
<a href="#" onclick="showdd(); return false;" >
<img src="foo.png">
</a>
</BODY>
</HTML>
Or plunkr demo: Click
Are all three pages (parent documents and the two iframes) from the same domain and subdomain?
If not, your only real option is to use window.postmessage
And even if they are from same domain, post message is good approach compared to directly accessing the DOM of another page.
Either way, with or without postmessage, You will need a reference to the window object of the iframe that you wish to target.
One approach is to have frame A inform the parent page (via raising event or calling a function in the parent page js), and then have the parent page inform frame B.
If you supply a example page I can create a working example for you.
EDIT: below code sample from the solution to the example that you provided.
notice how the frame is calling a function parent document. parent document then manipulates DOM of the other iframe.
plunkr
in frame A:
$('#show').click(window.parent.showDuck);
$('#hide').click(window.parent.hideDuck);
in parent document:
function showDuck(){
$('#overlayframe')[0].contentWindow.document.getElementById('duck').style.setProperty('visibility', 'visible');
}
function hideDuck(){
$('#overlayframe')[0].contentWindow.document.getElementById('duck').style.setProperty('visibility', 'hidden');
}
A mate helped me fix the problem:
Index.html:
<HTML>
<HEAD>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function showDuck(){
$('#dd').show();
$('#overlayframe').show;
}
function hideDuck(){
$('#dd').hide();
}
</script>
</HEAD>
<BODY>
<div style="display:block;position:absolute;top:20px;left:20px;z-index:997;">
<iframe name="UBERFRAME" src="index2.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800; height:480; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
<div id="dd" name="dd" style="display:none;position:absolute;top:20px;left:20px;z-index:998;">
<iframe id="overlayframe" name="OVERLAY" src="testframe.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800px; height:428px; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
</BODY>
</HTML>
index2 unharmed
shades.html:
<HTML>
<BODY>
<a href="#" onclick="javascript:window.parent.parent.showDuck(); return false;">
show Donald Duck
</a>
</BODY>
</HTML>
testframe.html:
<HTML>
<BODY>
<IMG SRC="http://img3.wikia.nocookie.net/__cb20130203061323/disney/images/6/6b/Donald_Duck_transparent.png" onclick="javascript:window.parent.hideDuck(); return false;">
</BODY>
</HTML>
Or http://plnkr.co/edit/x13V7l0qwv0jtI8IKXtf?p=info
I need to hide the frame "topFrame" and "menu" when I click on any image or button and unhide it when I click on it again. Is there a way I can achieve it easily?
Sorry for not posting "topFrame" and "menu" jsp files, as those are dynamically rendering in my application.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="/jquery-1.10.2.min.js" language="javascript"></script>
<style type="text/css"></style>
</head>
<frameset rows="80,*" frameborder="no" border="0" framespacing="0">
<frame src="/someAction1.do" name="topFrame" scrolling="no" noresize="">
<frameset cols="20%,80%*" frameborder="0" framespacing="0" border="0">
<frame src="/someAction2.do" name="menu" marginheight="0" marginwidth="0" noresize="true" scrolling="auto" framespacing="0" border="0" frameborder="0">
<frame src="/someAction2.do" name="information" marginheight="0" marginwidth="0" scrolling="auto" framespacing="0" border="0" frameborder="0">
</frameset>
</frameset>
<noframes>
// ...
</noframes>
</html>
Use the toggle() function to show/hide.
$('button').on('click',function(){
$('frame[name="topFrame"],frame[name="menu"]').toggle();
});
If the buttons too are generated dynamically, delegation would be important.
$(document).on('click','button_or_img',function(){
$('frame[name="topFrame"],frame[name="menu"]').toggle();
});
I think the following would help you. The code is very simple and self explanatory...
<html>
<head>
<script>
function show1()
{
document.getElementById("div_main").style.visibility = "visible";
}
function close_dialog()
{
document.getElementById("div_main").style.visibility = "hidden";
}
</script>
<style>
*
{
margin:0px;
padding:0px;
}
#div_main
{
height:100%;
width:100%;
background-color:rgba(204,204,204,.8);
z-index:300;
position:fixed;
visibility:hidden;
}
#cls_btn
{
height:100px;
width:100px;
margin-left:50%;
}
body
{
background-color:#09F;
}
</style>
</head>
<body>
<div id="div_main">
<input type="button" value="Close Me" onClick="close_dialog()" id="cls_btn">
</div>
<input type="button" value="Click Me" onClick="show1()">
</body>
</html>
Add this code at the bottom of your page before the body closing tag:
<script>
(function(){
$('img, button').on("click" , function (e) {
$('frame[name="topFrame"], frame[name="menu"]').toggle();
});
}());
</script>
You can do it via fadeToggle()/toggle().
$('img, button').click(function () {
$('frame[name="topFrame"], frame[name="menu"]').fadeToggle("slow");
});
I think it will work:
$("#button").click(function(){
$('[name="menu"]').toggle();
$('[name="information"]').toggle();
});
I have a html page
<html>
<head>
</head>
<frameset cols="*" rows="48,100%" border="0" frameborder="yes" bordercolor="black">
<frame name="header" src="bar.jsp" scrolling="no" marginheight="0" marginwidth="0" frameborder="0">
<frame name="body" src="body.jsp" scrolling="auto" marginheight="0" marginwidth="0" frameborder="0">
<frame>
</frameset>
</HTML>
Inside frame body I have the page body.jsp:
<table id="people" width="100%" border="0" cellspacing="8" cellpadding="0">
<tr class='list'>
<td></td>
</tr>
<tr class='list'>
<td></td>
</tr>
</table>
How to change the font size for all rows inside table?
It looks like your frames are the same domain so thats good. What you can do is insert a CSS file onto your frames using javascript, and then target whatever you want.
Something similar to this question:
var cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
frames['body'].document.head.appendChild(cssLink);
and in that css file add something like:
#people tr{
font-size:12pt;
}
I have a document which has a nested frameset. I need to access one of the nested frames, named "sq_main", and access content inside this frame. Here is my structure:
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<frameset rows="28,*" frameborder="0" border="0">
<frame src="/_admin/?SQ_BACKEND_PAGE=header" name="sq_header" scrolling="no" marginwidth="0" marginheight="0">
<frameset cols="380,10,*" frameborder="0" border="0" id ="main_frameset">
<frame src="/_admin/?SQ_BACKEND_PAGE=sidenav" name="sq_sidenav" scrolling="no" marginwidth="0" marginheight="0">
<frame src="/_admin/?SQ_BACKEND_PAGE=resizer" name="sq_resizer" scrolling="no" marginwidth="0" marginheight="0">
<frame src="/_admin?SQ_BACKEND_PAGE=main&assetid=43&sq_from_frontend=1" name="sq_main" marginwidth="0" marginheight="0" scrolling="yes">
</frameset>
</frameset>
<noframes></noframes>
</html>
Sadly, I can't change the code, that is why I need to access it with jQuery. I have tried to write a jQuery selector to access the "sq_main" frame, but no luck so far:
$('body', parent.frames[0].sq_main).prepend('<h1>TEST!!!!</h1>');
Ideas on how to drill down into this ugly structure? :)
Try to navigate one step at a time. IIRC, the frames array only works with iframes. Try the selector frame[name = 'sq_main'] instead.
Example by Ronny Sherer:
var frameDocument = $('frame[name="mainFrame"]', top.document)[0].contentDocument;
$(frameDocument).find('body').prepend('<h1>TEST!!!!</h1>');
var sql_mainJQ = $("frame[name='sql_main']", top.document);
//$('body', sql_mainJQ.contents()).prepend("TEST!!!!"); // :( Bad
var frameContent = sql_mainJQ[0].contentDocument;
if ($.browser.msie) {
frameContent = mainFrameJQ[0].contentWindow.document;
} else {
frameContent = mainFrameJQ[0].contentDocument;
}
$('body', sql_mainJQ.contents()).prepend("TEST!!!!"); // :> Maybe OK!
<html>
<head>
<title>frames.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<frameset rows="100,*" frameborder="1" border="2">
<frame src="helloworld.html" name="sq_header" id="sq_header" scrolling="yes" marginwidth="0" marginheight="0">
<frameset cols="380,300,*" frameborder="1" border="2" id ="main_frameset">
<frame src="helloworld.html" name="sq_sidenav" id="sq_sidenav" scrolling="yes" marginwidth="0" marginheight="0">
<frame src="anotherpage.html" name="sq_resizer" id="sq_resizer" scrolling="yes" marginwidth="0" marginheight="0">
<frame src="helloworld.html" name="sq_main" id="sq_main" marginwidth="0" marginheight="0" scrolling="yes">
</frameset>
</frameset>
<noframes>
</noframes>
</html>
<html>
<head>
<title>anotherpage.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
// You may specify partial version numbers, such as "1" or "1.3",
// with the same result. Doing so will automatically load the
// latest version matching that partial revision pattern
// (e.g. 1.3 would load 1.3.2 today and 1 would load 1.7.2).
google.load("jquery", "1.6.2");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
</script>
<script language="Javascript">
var d = new Date();
var n = d.getTime();
$(document).ready(function(){
$('#title').html($("title").html());
/*
this is to work in safari
see "Updated answer provided below....looks like a setTimeout maybe needed as the frames aren't loaded when the initial startup script runs. – David Hoerster Aug 21 '10 at 16:38
url: http://stackoverflow.com/questions/3534082/jquery-access-table-inside-a-frame
*/
setTimeout(writemsg, 2000);
function writemsg() {
$('#helloworld',top.frames["sq_main"].document).html("Write from "+ $("title").html()+" in sq_main at "+ n);
}
});
</script>
</head>
<body>
<div id="title">
</div>
</p>
<div id="helloworld">
Hello World JQuery!</div>
</body>
</html>
<html>
<head>
<title>helloworld.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
// You may specify partial version numbers, such as "1" or "1.3",
// with the same result. Doing so will automatically load the
// latest version matching that partial revision pattern
// (e.g. 1.3 would load 1.3.2 today and 1 would load 1.7.2).
google.load("jquery", "1.6.2");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
</script>
<script language="Javascript">
$(document).ready(function(){
$('#title').html($("title").html());
});
</script>
</head>
<body>
<div id="title">
</div>
</p>
<div id="helloworld">
Hello World JQuery!</div>
</body>
</html>
I have a main page that contains a frameset with some frames. I need to access and set the text of a button inside one of my frames from a javascript method in the main page.
I believe its the window.frames that is the issue. It works in IE6 but not in Firefox. Is there something else I can use in place of this to get it to work across all browsers?
Any help would be appreciated.
<!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>blah blah</title>
<script language="javascript" type="text/javascript">
var showString = "show";
var hash = String(window.location.hash);
function showHideFrames()
{
var contentPage;
contentPage = hash.substring((showString.length + 2), hash.length);
var showCheck = hash.substring(1, (showString.length + 1));
// Grab the show or hide
if (showCheck == showString)
{
document.getElementById("outerFrame").cols = "285, *";
window.frames['topFrame'].document.form1.showHideButton.value = "Hide";
}
else
{
document.getElementById("outerFrame").cols = "0, *";
window.frames['topFrame'].document.form1.showHideButton.value = "Show";
}
if (contentPage != '')
{
document.getElementById("contentFrame").src = contentPage;
}
document.getElementById("navFrame").src = "default.aspx?hash=" + contentPage;
}
</script>
</head>
<frameset onLoad="showHideFrames()" name="outerFrame" id="outerFrame" border="0" frameborder="1" framespacing="0" cols="0,*" scrollbars="no">
<frame name="navFrame" id="navFrame" scrolling="yes" noresize="noresize" />
<frameset name="innerFrame" id="innerFrame" border="0" frameborder="0" framespacing="0" noresize="noresize" rows="40,*">
<frame name="topFrame" id="topFrame" src="topFrame.htm" scrolling="no" noresize="noresize" />
<frame name="contentFrame" id="contentFrame" scrolling="auto" />
</frameset>
</frameset>
</html>
Try using getElementById() on the inner frame's document object to get access to the button element.
window.frames['topFrame'].document.getElementById('showHideButton').value = 'Hide';
This works for me in both IE and Firefox if the button's id is "showHideButton".
The frames are all in the same domain, right? If they're not, your problem is the Cross Domain Policy.
I figured it out. It ended up being a combination of a couple of things.
I switched all the controls to use id="=.." and name="..."
I replaced all direct references to objects with document.getElementById.
Replaced some IE-specific code with more generic code.
Replaced < button ... > < /button > with < input type="button" ... / >
Thanks for all the input from people. Here is the code if anyone is interested.
main page
<!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>Untitled Page</title>
<script language="javascript" type="text/javascript">
var showString = "show";
var hash = String(window.location.hash);
function showHideFrames() {
var contentPage;
contentPage = hash.substring((showString.length + 2), hash.length);
var showCheck = hash.substring(1, (showString.length + 1));
// Grab the show or hide
if (showCheck == showString) {
document.getElementById("outerFrame").cols = "285, *";
window.frames['topFrame'].document.getElementById('showHideButton').value = 'Hide';
}
else {
document.getElementById("outerFrame").cols = "0, *";
window.frames['topFrame'].document.getElementById('showHideButton').value = 'Show';
}
if (contentPage != '') {
document.getElementById("contentFrame").src = contentPage;
}
document.getElementById("navFrame").src = "default.aspx?hash=" + contentPage;
}
</script>
</head>
<frameset onload="showHideFrames()" name="outerFrame" id="outerFrame" border="0"
frameborder="1" framespacing="0" cols="0,*" scrollbars="no">
<frame name="navFrame" id="navFrame" scrolling="yes" noresize="noresize" />
<frameset name="innerFrame" id="innerFrame" border="0" frameborder="0" framespacing="0" noresize="noresize" rows="40,*">
<frame name="topFrame" id="topFrame" src="topFrame.htm" scrolling="no" noresize="noresize" />
<frame name="contentFrame" id="contentFrame" scrolling="auto" />
</frameset>
</frameset>
</html>
top frame
<!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>Untitled Page</title>
<script language="javascript">
showString = "show";
var hash = String(window.location.hash);
function ShowHideButton_Click() {
var action;
var showCheck = document.getElementById("showHideButton").value;
if (showCheck == "Show")
action = "show";
else
action = "hide";
ShowHideButton(action);
return false;
}
function ShowHideButton(action) {
if (action == "show") {
parent.document.getElementById("outerFrame").cols = "285, *";
document.getElementById("showHideButton").value = "Hide";
}
else {
parent.document.getElementById("outerFrame").cols = "0, *";
document.getElementById("showHideButton").value = "Show";
}
}
</script>
</head>
<body>
<form name="form1">
<div align="right">
<input type="button" id="showHideButton" onclick="ShowHideButton_Click()" value="Show" />
</div>
</form>
</body>
</html>