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);
Related
I want to create a web page to display amazon products (kiosk-like display) and the goal is to change to the next product every few seconds. Amazon pages can't load in frames, so using php (or any client side/server side solution) is there a way to set a timer to change to the next product?
Here is the sequence:
Show product 1 -----> show product 2 ----> show product 3 ----> repeat
Here is a simple code that uses frames but it doesn't load amazon in the frame. My next step was to add timer but first I need to figure out how I can show amazon pages in a fashion that I can move to the next one after a few seconds. Basically the issue is that without the frames how can I set a timer (either server side or client side) to redirect the page to the next product?
<!DOCTYPE html>
<html>
<body>
<iframe width="500" height="400" id="myFrame" src="http://www.amazon.com"></iframe>
<p>Click the button to change the value of the src attribute in the iframe.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myFrame").src = "http://www.amazon.com";
}
</script>
</body>
</html>
Coding method (javascript and popup window):
I was able to do this with a pop up window instead of frames. Basically what you need to do is to open a pop up and control the url of that pop up through the parent page. Here is a sample code of the solution:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type='text/javascript'>
window.setInterval(function(){
process();
}, 15000);
arr = ['http://www.amazon.com/Apple-AirPort-Express-Station-MC414LL/dp/B008ALA2RC',
'http://www.amazon.com/dp/B0087NZ31S'
];
var popup = window.open('http://www.amazon.com','rotator');
i = 0;
function process(){
i++;
index =i%arr.length;
popup.location.href=arr[index];
}
</script>
</body>
</html>
Browser extension method:
I found a chrome extension named Rotisserie URL Rotator that does the rotation, can set a time for each page in seconds. Basically you will specify a set of (url, time) tuples and it will rotate on those urls for the specified times. I also found a few more but for now this does job for the display purpose well. I also found one that will rotate between tabs and had a lot more features like specifying random times, etc. But my main purpose was to show the page in only one tab.
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>
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.
Hello guys
I'm creating a little website for my Javascript course. I created a page with 3 frames as above in the image.
I don't know if it is possible to do that but what I want to do is:
When the visitor clicks on "PAGE A" from the FRAME MENU, the text "TEXT TITLE" in the FRAME HEADER is changed to "WELCOME TO A", or when he clicks "PAGE B", the text "TEXT TITLE" is changed to "WELCOME TO B".
I know it's possible to load two pages by one click and therefore you could say why not load another page in the frame header, but it's not what I want to do.
Is it possible to do that by any means in javascript?
Thanks
Well, first suggestion - don't use frames. It is very easy to include pages into each other, so just write little components like menu.html, top.html, mainpage.html and include those into your pages.
This makes page management much easier - you reuse the code and can make the pages from those little components.
Then when you click on the link you would just go to the page that has manu included, in the top you include the appropriate title and the main page.
If you use some server-side language you could pass the title of the header as a parameter.
If you really want to go with frames you would need to do something like this:
Main page with frames:
<html>
<head>
<title>Frames Example 5</title>
</head>
<frameset cols="20%,80%">
<frame src="page1.htm" name="left_frame">
<frame src="page2.htm" name="right_frame">
</frameset>
</html>
Page, that changes links:
<html>
<head>
<title>frame 10</title>
<script language="JavaScript" type="text/javascript">
<!--
function change()
{
parent.left_frame.location="page3.htm";
parent.right_frame.location="page4.htm";
}
//-->
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<center>
Click the link below to change both frames.
<br />
change 2 frames
</center>
</body>
</html>
so, in your menu add this javascript and change the links and reference your frames.
I have a web page with a number of iframes, including 3rd party iframes like ad sense and various sharing buttons.
In Firefox, I've noticed that occasionally the content of these iframes get swapped, such that you'll get an ad sense ad where another iframe is. It seems completely random where iframe content shows up. It seems it may have something to do with caching.
Does anyone know what causes this, or any steps I can take to prevent this from happening?
In case anyone is looking I was able to track down the bug report:
https://bugzilla.mozilla.org/show_bug.cgi?id=356558
It's been 4 years and it doesn't even look like they have confirmed it.
The workaround described in that Mozilla bug report worked for me:
<iframe src="webpage2.html?var=xxx" id="theframe"></iframe>
<script>
var _theframe = document.getElementById("theframe");
_theframe.contentWindow.location.href = _theframe.src;
</script>
One plausible answer is that two iframes have the same name. I've experienced this several times in conkeror (firefox based), and every time it's been a name conflict.
I've been wrestling with this for awhile now. The problem is with firefox and the way that it caches iframe content. It's not random either. There is nothing to do to prevent this short of not using iframes.
You can reload the iframes onload using something like:
var reloadIframes = function () {
var a = window.frames, b = a.length
while (b--) {
a[b].src = a[b].src;
}
}
In the case of ads it will cause double impressions which will violate you contract.
An easy way to replicate the issue is create 3 html files.
<!--frame1.html-->
<html>
<body>
<h3>frame one</h3>
</body>
</html>
<!--frame2.html-->
<html>
<body>
<h3>frame two</h3>
</body>
</html>
<!--index.html-->
<html>
<body>
<iframe src="frame1.html"></iframe>
<iframe src="frame2.html"></iframe>
</body>
</html>
Open in firefox. Then switch frame one and frame two.
<!--index.html-->
<html>
<body>
<iframe src="frame2.html"></iframe>
<iframe src="frame1.html"></iframe>
</body>
</html>
Refresh index.html. The iframes will not be swapped until you clear your cache.
There is a bug in at mozilla but no one is currently working on it.
This problem maybe similar to yours
try to put
window.onload = yourcode;
together with body unload.
i have the tool tip javascript on head segment which contain
window.onload = initTip;
but conflict with my onload iframe
<body onload = "parent.myframe.location='mypage.html'">
my solution :
delete that window.onload = initTip; from head segment, then put them into body.
<body onload = "initTip(); parent.myframe.location='mypage.html'">
it's work with reload button on firefox