I have PHP page in subfolder, /subfolder.
In root I have two files: index.html and demo.html.
demo.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</head>
<body>
<div id="demo_wrapper">
<div id="themeslist">
<form action="" name="form" id="form">
<select name="select" onChange="MM_jumpMenu('parent',this,1)">
<option value="#">Select Theme</option>
<option value="http://127.0.0.1/themes/index.php?theme=1">Theme1</option>
<option value="http://127.0.0.1/themes/index.php?theme=3">Theme2</option>
</select>
</form>
</div>
</div>
</body>
</html>
and index.html:
<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<frameset rows="100,*" framespacing="0" frameborder="no" border="0">
<frame src="http://127.0.0.1/demo.html" name="head_frame" scrolling="no" noresize="noresize" id="head_frame" title="head_frame" />
<frame src="http://127.0.0.1/themes/index.php" name="main_iframe" id="main_iframe" title="main_iframe" />
</frameset>
<noframes>
<p>Your browser does not handle frames!</p>
</noframes>
</html>
Source: http://www.entheosweb.com/website_design/jump_menus.asp
Now problem is when i select option in menu - it reloads whole page and frames dissapear.
What change to reload only selected frame (main_iframe)?
First of all you don't use iframe, you use the old fasion frameset. However,
In your form that handles the select menu, you have to set target attribute to be the name of the frame you wants the location open in it, as follows:
<form action="" name="form" id="form" target="main_iframe">
You have to choose the target to be suitable with the window name that you want to open it. i.e main_iframe or anything else.
So I found solution:
It was way too easy... just changed onchange action in select menu to:
onchange="window.open(this.options[this.selectedIndex].value, 'nameOfTargetFrame')"
and removed whole *MM_jumpMenu* code. Thanks for tips, I wouldn't found it without them :)
Related
Hello I want to autofill data in iframe on cross domain.I have a code but it's not working. please help me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function autoFill() {
var f=fm.document.forms[0];
f.form-control.value='Zanne';
f.submit();
}
</script>
</head>
<body>
<div>
<button type="button" onclick="autoFill();">autoFill</button>
</div>
<iframe name="fm" id="fm" src="url.com" width="100%" height="100%"></iframe>
</body>
</html>
the input filled:
Have any way to do this.
This is going to be a CORS violation.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
There are some workarounds to this. You have to use the postMessage API. Your parent window would need to send JavaScript events to the iFrame, which would need to have an event listener and react to it.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
I am experiencing a problem whith showModalDialog on IE11. The dialog window works fine, but ignores the width and height parameters. The dialog opens in a very small window and the user needs to resize it.
I know that this function is deprecated in Chrome and I know other options like jQuery-UI dialog, but I want to know if it is possible to fix this problem for IE11 using showModalDialog.
js code:
var url = "/xxWar/xxModal.jsp?title=xx&frameUrl=/xxWar/xxServlet%3Faction%3Dxx";
var value = showModalDialog(url, init, "dialogWidth:" + width + "px;dialogHeight:" + height + "px;resizable:yes;status:no;scroll:yes;help:no");
and the xxModal.jsp:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><%=request.getParameter("title")%></title>
</head>
<frameset rows="0,*" frameborder="no" border="0" framespacing="0">
<frame src="" name="header">
<frame src="<%=request.getParameter("frameUrl")%>" name="main" id="main">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
Thank you!
I fixed the problem adding this line <meta http-equiv="X-UA-Compatible" content="IE=7"> inside de modal.jsp:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><%=request.getParameter("title")%></title>
</head>
<frameset rows="0,*" frameborder="no" border="0" framespacing="0">
<frame src="" name="header">
<frame src="<%=request.getParameter("frameUrl")%>" name="main" id="main">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
<meta http-equiv="X-UA-Compatible" content="IE=7">
You don't need to go back as far as IE7, setting content="IE=9" works too - that's what we use & we set height & width according to our needs ;)
I am trying a code, that will load an iframe onsubmit. I am able to do it onchange of a text field (code taken from somewhere). But onsubmit does not work:
Works
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
</head>
<body>
<input value="Song1" onchange="foo.location='song.php?song=blind_willie.mp3'" style="display:block; margin:auto" type="text">
<iframe name="foo" style="display:block; margin:auto"></iframe>
</body>
</html>
DOES NOT WORK
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
</head>
<body>
<input value="Song1" onsubmit="foo.location='song.php?song=blind_willie.mp3'" style="display:block; margin:auto" type="Submit">
<iframe name="foo" style="display:block; margin:auto"></iframe>
</body>
</html>
Onsubmit goes on the form, not on the submit button, try using type="button" instead in an "onclick" event.
OnSubmit is a form event so it won't work on input.
Use type='button' and the OnClick event instead.
2 things:
onsubmit belongs to the form element, not the input, so you would put your current input in a form like this:
<form onsubmit="foo.location='song.php?song=blind_willie.mp3'; return false">
<input value="Song1" style="display:block; margin:auto" type="Submit" />
</form>
The 2nd thing is that you need to return false from the onsubmit or it will try to refresh the page since you don't have an action.
On a side note, this seems like quite a strange method you have. You could certainly just do:
<input value="Song1" onclick="foo.location='song.php?song=blind_willie.mp3'" style="display:block; margin:auto" type="Submit" />
I have some Dijit Tabs, and in those tabs I have some Dojo Text boxes and Fields. Some of my Dojo Tabs load when the page is loaded, and some load only when clicked on.
My issue is that I cant get the Tabs that load only when clicked, to work with the Dojo modules.
Its hard to explain, so I made a simple example to help. I have included as much around the code that I think may have any effect on the outcome.
Index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/dojo.xd.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require('dijit.layout.TabContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require("dijit.form.DateTextBox");
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" />
</head>
<body class="tundra">
Works Outside of a Tab: <input class="tundra" id="outsideworking" name="outsideworking" type="text" dojoType="dijit.form.DateTextBox">
<br><br><br>
<div id="tab" dojoType="dijit.layout.TabContainer" style="width:50%;height:200px" >
<div id="tab-working" dojoType="dijit.layout.ContentPane" selected="true" title="Loads on Page Load">
Test working
<input class="tundra" id="working" name="working" type="text" dojoType="dijit.form.DateTextBox">
</div>
<div id="tab-notworking" dojoType="dijit.layout.ContentPane" title="Load On Click" preload="false" parseOnLoad="false" href="loadafter.php">
</div>
<div id="tab-simplenotworking" dojoType="dijit.layout.ContentPane" title="Load On Click with Simple File" preload="false" parseOnLoad="false" href="simple.php">
</div>
</div>
</body>
</html>
loadafter.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/dojo.xd.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" />
</head>
<body class="tundra">
Outside of a Tab
Not working here:
<input class="tundra" id="notworking" name="notworking" type="text"
dojoType="dijit.form.DateTextBox">
</body>
</html>
simple.php
<input class="tundra" id="simplenotworking" name="simplenotworking" type="text" dojoType="dijit.form.DateTextBox">
Is anyone able to help point me in the right direction?
Thanks
gggggggg
In short, if you have set parseOnLoad as false, you need to parse the html fragment by yourself. And for your tab pages, if you clicked a tab, you may need to parse the tab page manually.
For example:
<div id='a'><input id="simplenotworking" name="simplenotworking" type="text" dojoType="dijit.form.DateTextBox">
</div>
You can use dojo.parser.parse(dojo.byId("a")) to render the widget.
Btw, you do not need to attach tundra class in every places of dijit widgets, it just need to be placed at the body tag,.
Try more sophisticated selector like dojo.query to pinpoint the exact Dom you want.
if you want to select a dijit for the parser you need to do it with dijit
dojo.parser.parse(dijit.byId("a"))
if you use dojo, it will select the dom node.
if you use dijit it will select the widget
I have a html main.html as given
----- main.html----------------
<title>FlexTrail</title>
<script src="main.js"></script>
<frameset rows='200,200'>
<frame id='one' src="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project1/bin-debug/project1.html" frameborder='0' />
<frame id='two' src="" frameborder='0' />
</frameset>
</head>
<body >
</body>
here the first frame contains a html generated by Flex Builder 3 and on button click on that flex project i am calling function func2() in main.js using External Interface.
---- main.js-----------------
var flag2=0;
function func2()
{
flag2=1;
parent.frames['one'].location="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project1/bin-debug/project1.html";
parent.frames['two'].location="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project2/bin-debug/project2.html";
}
I want the other file to open in same window bellow the first one.But the problem here is when i run this in IE8 the other frame opens in a different window but in Firefox im not getting any respose.
Note:- Javascript is enabled in both browsers and popup are not blocked
Plz tell me where i m wrong
Thanks in advance
Prashant Dubey
Your frameset is wrong. A frameset is not a page, so it doesn't have a body:
<html>
<head>
<title>FlexTrail</title>
<script src="main.js"></script>
</head>
<frameset rows='200,200'>
<frame id="one" src="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project1/bin-debug/project1.html" frameborder="0" />
<frame id="two" src="" frameborder="0" />
</frameset>
</html>
Ok, found fix. Need to add NAME tag to Frames as well as ID tags. Also need properly formatted frameset tags as others have answered, but without NAME tag it still won't work.
Edit (again): Also, noticed your other quest about multiple files and single script. I just dumped the script inline for my example below, but you could make it a .js file as well. Rather load it to all html files, you could just use parent.function() style js calls in the secondary files that get loaded into frames. Again, depends on how much code is there and what you are trying to do etc. Mileage may vary. =) (You'll notice I didn't need to add script in my 1.html file.)
See below...
Main html:
<HTML>
<HEAD>
<TITLE> Title Goes here </TITLE>
<script type="text/javascript">
var flag2=0;
function func2()
{
flag2=1;
parent.frames['one'].location="1.html";
parent.frames['two'].location="3.html";
}
</script></HEAD>
<FRAMESET rows="115,*">
<FRAME SRC="1.html" ID="one" name="one">
<FRAME SRC="2.html" ID="two" name="two">
</FRAMESET>
</HTML>
Then, 1.html:
<HTML>
<HEAD>
<TITLE> Cow goes Moo </TITLE>
</HEAD>
<body>
One.html
<input onclick="parent.func2();" id="Button1" type="button" value="button" />
</body>
</HTML>
2.html and 3.html can be anything really, doesn't matter.
The problem with this setup is that IE looks for the ID tag in the javascript, but FireFox is looking for NAME attribute of the frame. Above pages work in IE, FF and Chrome.
Here is an example with iframes that may help
Main.htm
<!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>
<script type="text/javascript">
function loadTwo()
{
document.getElementById('two').src = 'two.htm'
document.getElementById('two').style.display='block';
}
function loadThree()
{
document.getElementById('two').src = 'three.htm'
document.getElementById('two').style.display='block';
}
</script>
<title>Untitled Page</title>
</head>
<body>
<iframe id="one" src="One.htm"></iframe>
<iframe id="two" style="display: none" src="Two.htm"></iframe>
</body>
</html>
One.htm
<!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" type="text/javascript">
// <!CDATA[
function load2_onclick() {
parent.loadTwo()
}
function load3_onclick() {
parent.loadThree()
}
// ]]>
</script>
</head>
<body bgcolor="#ff0000">
<input id="load2" type="button" value="Load 2" onclick="return load2_onclick()" />
<input id="load3" type="button" value="Load 3" onclick="return load3_onclick()" />
</body>
</html>
Two.htm
<!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>
</head>
<body bgcolor="#00ff00">
</body>
</html>
Three.htm
<!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>
</head>
<body style="background-color: #0000ff">
</body>
</html>
Frames were used to segmentate webpages, just like slices in design tools. They cannot overlap each other.
Maybe you could achieve what you want by using iframes instead of using a frameset. See this site for a demonstration.
But then again, I wouldn't be surprised if there are browsers that do not support overlapping iframes.