For a frameset, i want to open a link from page of A frame by using onmouseover and open it in another B frame? when mouseover the link from A frame, it will open the page on B frame. Give a hint.
When I worked with <frame> it has taking a long time ago (seven or more years).
Because you didn't post any html sourcode :-|, I created a theoretical situation:
<html>
<head>
<script type="text/javascript">
function nullRand () {
//document.getElementById("frameBid").src = "myNewInternalPage.html";
document.getElementById("frameBid").src = document.getElementById("frameAid").src;
}
</script>
</head>
<frameset cols="25,*" frameborder="no" border="0" framespacing="0" framepadding="0">
<frame id="frameAid" name="frameAname" src="myHtmlFile.html" noresize>
<frame id="frameBid" name="frameBname" src="" noresize>
</frameset>
</html>
SIn my theoretical file 'myNewInternalPage.html' you have to instert the method call
An link
Note: frame is not approiate to show external content. That's why iframe exists.
Update:
After a hard fight with the OP I got something to my hands. Here is a solution:
1st: Replace the old Javascript code from 'nullRand()' with the new one
function nullRand (linkObject)
{
document.getElementById("frameBid").src = linkObject.href; // The new way to access to a frame
//top.frames["center"]..src = linkObject.href; <-- The old way to access to a frame */
}
2nd: Modyfiy the a tag -where the radio streams are listed- as follow:
...
So it should work. In my eyes you should think about a new concept for your task.
Related
Usually we put our JavaScript <script> tags at the bottom of an HTML document, right before the closing </body> tag, with the benefit that they are executed after all the elements are already available in the DOM and some more things.
However, I'm using a frame document1 which does have a <frameset> instead of a <body> tag. I don't want to put them in the <head> of the document because they wouldn't have immediate access the DOM elements below3. And I don't want to use <iframe>s in a standard body tag either4. I've tried
<head>
<title>Framesets are interesting</title>
</head>
<frameset cols="50%,50%">
<frame id="frame-a" src="a.html">
<frame id="frame-b" src="b.html">
<script type="text/javascript">
console.log("hello world!");
console.log(document.getElementById("frame-a")); // this is what I'm after
</script>
</frameset>
However, the script was not executed at all, it didn't even show up in the DOM inspector. Sure, a <frameset> may only contain <frame> and <noframes> tags. But, is there really no way to get scripts execute after a <frame> tag?
Just for reference, placing them after </frameset> like it's sometimes done with <body>s doesn't work either.
1: Yes, I know they're deprecated. They were just the natural choice2 for my project, a neat side-by-side view that shows two documents and scrolls them together in a sophisticated manner.
2: …and I never used them before, so I wanted to give it a try.
3: That is what I ended up with, after all an onload handler is trivial. Still the question remains, I'm curious.
4: works fine, but requires intricate CSS styling
A <script> element can only appear in either a <head> element or <body> element. It cannot appear as a child of a <frameset> element; a <frameset> can only contain <frame> elements, <noframes> elements, or other <frameset> elements. See the Transitional DTD:
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- window subdivision-->
Normally, browsers are happy to insert elements into other elements where they don't belong in complete defiance of what the DTD says since the DTD is just a rulebook, but this doesn't always happen (for example, you can never put any other flow element into an HTMLParagraphElement no matter how hard you try), so if a browser is refusing to place an HTMLScriptElement in an HTMLFrameSetElement, chances are this is why.
Any workarounds will involve placing a <script> element in either the frameset's <head> element, or within one of the frames. (You can also place a <script> element within a <noframes> element since <noframes> has the same content model as <body>, but this won't solve your problem for obvious reasons.)
Similar problem was solved here: Dynamically set frame src using javascript
<head>
<title>Framesets are interesting</title>
<script type="text/javascript">
function LoadPage(){
console.log("hello world!");
console.log(document.getElementById("frame-a")); // this is what I'm after
}
</script>
</head>
<frameset cols="50%,50%" onload="LoadPage();">
<frame id="frame-a" src="a.html">
<frame id="frame-b" src="b.html">
</frameset>
You can put the script by inserting a frame with a data URI:
<head>
<title>Framesets are interesting</title>
</head>
<frameset cols="50%,50%">
<frame id="frame-a" src="a.html">
<frame id="frame-b" src="b.html">
<frame src="data:text/html,<script type='text/javascript'>with(parent) {
console.log('hello world!');
console.log(document.getElementById('frame-a'));
}</script>">
</frameset>
Of course, you will need to be careful with quotes, and the script will run in another realm. You can use parent or top to access the window of the outer document.
Before anyone asks why I'm using frames: At my job, I need to test a website that uses frames. I am experimenting with using Javascript to get some information from a frame, and I am having trouble getting frames to work, period.
First, just to experiment, I created a file on my machine, test.html. It loads two frames: the left one containing another test page I wrote (test2.html), and the right frame containing some web page.
<html>
<FRAMESET cols="20%, 80%">
<FRAME name="leftFrame" src="test2.html">
<FRAME name="rightFrame" src="http://www.foxnews.com/">
</FRAMESET>
</html>
This is my other test page, test2.html. It simply has a button which, when clicked, alerts you with the length of window.frames. From what I've found online, that should tell me the number of frames there are. Problem is, the result is zero.
<html>
<head>
<script type="text/javascript">
function doSomething() {
alert(window.frames.length);
}
</script>
</head>
<body>
<button type="button" onclick="doSomething();">
Click me
</button>
</body>
</html>
How do you access a frame in JavaScript? I don't suppose this is issue comes from the fact that one of the frames points to a local file?
The window object doesn't refer to the entire browser window, but the logical window where the document object livs. The frameset, and each frame, has it's own window and document objects.
The window where the code is doesn't have any frames, you need to look at the parent window, where the frameset is:
alert(window.parent.frames.length);
My site is setup like this:
<frameset rows="80,*">
<frame name="top" id="top" src="header.html">
<frameset id="innerframe" cols="300,*">
<frame name="nav" src="nav.html">
</frameset>
</frameset>
In header.html I have:
function fAlert() {
alert('test');
}
How can I call fAlert() in nav.html?
I tried
var fframe = parent.document.getElementById('top');
fframe.fAlert();
and also
parent.frames.top.fAlert();
but it didnt work (fAlert is undefined).
Any ideas how I can accomplish this?
First off, don't use framesets and frames. Use iframes--frames are deprecated.
Secondly, provide an id for the iframe (or frame, if you must) in order to direct the function call correctly. (You've already pretty much done this, but I'm being methodical.) I wouldn't name it 'top' because 'top' already has a meaning in terms of windows and frames.
From inside the nav frame, parent.insertYourFrameIdHere.fAlert() should work correctly. This assumes two things: 1) The page and the frame contents come from the same domain, and 2) header.html loaded correctly and there were no script errors in it. Script errors or other issues could keep the function from ever being created.
For the html in your question following should work.
window.parent.parent.frames[0].fAlert();
First of all, even if my question is about how to refresh <iframe>'s without flickering, any other suggestions that would solve my problem will be welcome.
Problem: I have a server that publishes a "main" html page. Meanwhile, it takes pictures (say, one per second) and saves them on the HDD. I want the picture to be displayed on the web page and be refreshed.
Solution found: I use a <iframe></iframe> scope where I put another page that contains only the image. Then this second page is refreshed periodically. So, the entire page is not refreshed, only the image frame. The problem is that this solution suffers from a flickering that occurs each time it is refreshed.
Here is the code of the main page (a little compacted):
<!DOCTYPE html><html><head><title>Blabla</title></head>
<body bgcolor="#404040"><h1>WELCOME!...</h1><hr>
<table border="0"><tr height="480"><td width="640">
<!-- RIGHT HERE! -->
<iframe src="image.html" width="640" height="480" frameborder="0"></iframe>
</td></tr></table>
</body></html>
and the second web page is like this:
<!DOCTYPE html><html><head>
<script type="text/javascript">
<!--
function f( t )
{
setTimeout( "location.reload( true );", t );
}
-->
</script>
</head>
<body bgcolor="#000000" onload="JavaScript:f( 1000 );">
<img src="../images/myimage.png" alt="Erreur" height="100%" width="100%"/>
</body>
</html>
I'm a beginner in JavaScript, so I don't pretend this piece of code is good, even passable. Feel free to give me some advice.
Now, is it possible to reload without flickering? I read that the flickers occur while the page is not entirely loaded. I also read about hidden frames switched on and off during load time, etc. But I cannot find a good solution.
Also, I know that some technologies like AJAX exist but I don't know a lot more about them. Feel free to suggest me to use them if it is necessary, I can learn quickly...
EDIT 1: Most Android browsers don't support relative image size like in my example. Use absolute pixel values in place.
Reloading an iframe will always flicker. But you don't need ajax for this either, just a timer and a trick to avoid caching:
<!DOCTYPE html><html><head><title>Blabla</title></head>
<body bgcolor="#404040"><h1>WELCOME!...</h1><hr>
<table border="0"><tr height="480"><td width="640">
<div>
<img id="theimg" src="../images/myimage.png" alt="Erreur" height="100%" width="100%"/>
</div>
</td></tr></table>
<script type="text/javascript">
var theimg = document.getElementById("theimg");
var theurl = "../images/myimage.png";
setInterval(function() {
theimg.src = theurl + '?t=' + new Date().getTime();
}, 1000);
</script>
</body></html>
I am using frameset in my page. In the frameset i have taken two frames and in the first frame i have written some javascript code. How the javascript function of the frame will call the javascript function of the main page.
Can anyone please help :)
This will do it :
parent.FrameName.FunctionName()
If your frames are set up like this:
<frameset rows="50, 50">
<frame src="menu.html" name="menu">
<frame src="main.html" name="main">
</frameset>
Then you can access functions in the frame named main from the frame named menu using top.main.functionName().
parent.main.functionName() will also work in this case, but if you have more nested levels of frames then I find it less confusing to reference top (which is always the topmost frame) and 'drill down'.