How to reload an IFrame every x seconds? - javascript

Was wondering how I can reload an iframe every x seconds, perferably not using javascript.
Thanks.

With a Refresh: x HTTP header or with an HTML element in the document loaded into the iframe:
<meta http-equiv="refresh" content="x" />
This element should be placed inside of the document's <head/> element.
If you do not have control over the document loaded into the frame or the server that it is served from, you have two options:
JavaScript.
Write another HTML page with the above <meta/> element and include an iframe in that page targeting the other page. So you will have an iframe inside an iframe: outer document -> iframe(inner document with meta-refresh) -> iframe(original iframe target)
EDIT: Regarding option #2, here's a decent generic iframe in PHP that gives some flexibility in terms of refresh time and style. Just call it with something like:
http://www.mydomain.com/genericIframe.php?url=http://my.domain.com/mypage.htm&refreshTime=60&style=putYourStyleAttribHere
Here's the PHP/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>Generic Iframe</title>
<meta http-equiv="refresh" content="<?php print $_REQUEST['refreshTime']; ?>" />
</head>
<body>
<iframe src="<?php print $_REQUEST['url']; ?>" style="<?php print $_REQUEST['style']; ?>"></iframe>
</body>
</html>

Related

Iframe header location

I've a problem with iframe. My first file filtre.html contain iframe with a basic code like this:
<iframe name="filtre_demo" src="http://localhost:8888/modules/filtredemo/filtre.php" scrolling="no" height="220" width="220" frameborder="no"></iframe>
This file filtre.php is a drop down dynamic list with 3 levels (PHP/MYSQL).
Filtre.php this file is actually a dynamic dropdown 3 levels and will find info in a DB. The submit sent to a URL and all working fine.
My problem is with iframe. When I click on submit, target page is found in this part of 220x220 instead of reloading the parent page.
I tried several solutions to no avail. Here is part of my php file (I deliberately truncated several parts) including the header location and the form:
$ligne=mysql_fetch_assoc($rech_lien);
$lien=$ligne['lien'];
header('Location:'.$lien.'');
<!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" xml:lang="fr">
<head>
</head>
<body style="font-size: 75%; width: 210px;">
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="chgcategories">
<fieldset style="border: 0px">
<select name="modele" id="modele" onchange="submit();">
<option value="-1">-Choisissez un modele-</option>
<select name="sous_categorie" id="sous_categorie">
<option value="-1">-Sous-cat-</option>
</select>
<input type="hidden" name="nb_listes" value="3" />
<br /><br />
<input type="submit" name="ok" id="ok2" value="Envoyer"/>
</form>
I also tried with javascript but without success. In this configuration there I removed the line:
header('Location:'.$lien.'');
Here is the javascript code in the header:
<!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" xml:lang="fr">
<head>
<script type="text/javascript">
parent.document.location.href="<?php echo $lien; ?>";
</script>
</head>
<body style="font-size: 75%; width: 210px;">
The problems in this case is that the document load loop.
Anyway, I'm stuck, I thank you in advance for your help.
Vincent
If I understand what's happening, the buttons are targeting the contents of the iframe and loading the page inside that, instead of the actual window? If that's the case, set the target attribute the either _parent or _top and that should target the actual window.
You can try this javascript code:
<?php
/*-------Your Php Code-----*/
\\Replace this code #header(location)
echo "<script>";
echo "window.location='yourloation.php';";
echo "</script>";
/*-------Your Php Code-----*/
?>

X-UA-Compatible ignored when page launched by ShowModalDialog

I am wondering if someone can help me with the "X-UA-Compatible" tag with regards to launching a modal dialog.
I have the following 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 id="Head1" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title></title>
</head>
<body onload="load()">
<form id="form1" runat="server">
<iframe name="fr1" frameborder="0" id="fr1" width="675px" height="550px"></iframe>
.
.
.
var src = http://someurl.web;
document.all.fr1.src = src;
If I browse directly to this page (not to the http://someurl.web, but the page with the IFrame on it that points at http://someurl.web), the "X-UA-Compatible" stuff will work correctly, however, if I launch my page like below:
window.showModalDialog(urlToPage, "", "dialogHeight: 550px; dialogWidth: 800px; center: Yes;")
The "X-UA-Compatible" stuff is ignored. Why is this? What do I need to do in order to get that tag to be recognized when the page it is on launched via showModalDialog? This is happening when using IE9 on an Intranet site with "Display Intranet site in Compatibility View" Management will not allows to uncheck this, hence the use of the "X-UA-Compatible" tag.
As I understand it, in IE9 (and newer), if a page is launched in an iframe, the document mode will match that of the parent document, regardless of any X-UA-Compatible meta element or server header, unless the parent is using standards mode and the iframe specifies quirks mode. I'm not aware of a workaround.
See http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx for more information.

"scrollHeight" not updated in "onscroll" event handler when using HtmlCtrl in an application but works correctly in IE9

When sample below code loads in IE9, it works correctly, but when loads in an html control in an application, scrollHeight not updated in onscroll event handler when I change the innerHTML content in the handler, and therefore the alert not to be displayed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
function f()
{
var nBodyHeightOld = document.getElementById("div1").scrollHeight;
document.getElementById("div1").innerHTML += '<div>It is a test!</div>';
if (document.getElementById("div1").scrollHeight != nBodyHeightOld)
alert('scrollHeight changed!');
}
</script>
</head>
<body>
<div id='div1' style='overflow:scroll; height:300px' onscroll="f()">
<div style='height:400px'></div>
</div>
</body>
</html>
Becuse the application use IE8. To force application use IE9 add meta tag to html:
<meta http-equiv="X-UA-Compatible" content="IE=9" >

google chrome iframe body onLoad not working?

EDIT: It does work (sorry). Something in this script is causing it to stop in google chrome:
function checkLocation() {
var loc = top.location.href;
var suffix = "subpage.html";
if (loc.indexOf(suffix, loc.length - suffix.length) !== -1) {
top.location.href = "index.html";
}
}
Original post:
I have IE 9, FF 3.6.3, Chrome (18.0.1025.151) and Safari 5.1.5 all installed.
This works in all of the browsers except google chrome.
I have a HTML layout which contains a named iframe. The iframe src changes to display the different pages. On one of the pages I have a script which is loaded onLoad in the body tag. This script doesn't load when the page is loaded in the iframe in google chrome only - it works fine in other browsers. Also, if I load the page directly into google chrome (not via an iframe) it works just fine.
How do I fix this?
Here is an example code:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title> Example Page </title> </head>
<body> View subpage<BR/>
<iframe name="targetFrame"> </iframe>
</body>
</html>
subpage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title> Subpage </title>
<script type="text/javascript" src="subpage.js"> </script>
</head>
<body onLoad="initialise()"> Hello </body>
</html>
subpage.js
function initialise() {
alert("Script loaded.");
}
Thanks for looking.
Turns out its just a security exception
Unsafe JavaScript attempt to access frame
with URL file:///C:/Users/.../website/index.html
from frame
with URL file:///C:/Users/.../website/subfolder/subpage.html.
Domains, protocols and ports must match.
Once its online it should be fine.

Executing JS for iframe [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Invoking javascript in iframe from parent page
what Im trying to do is - load a html page with iframe'd website, and then remove an element of that website, lets call it '#test'
<!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" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
</head>
<body>
<iframe src="http://www.google.com"></iframe>
</body>
</html>
Anyone got any ideas how I would go about this? Can't seem to do it in normal .remove() fashion...
Thanks!
if you are in same domain you can use window.parent inside your iframe to load an script and your desired elements and using evaling that script remove the iframe itself
code for inner window aka the iframe:
var myscript = document.createElement('script');
myscript.innerHTML = "var removeIframe = function(){document.body.removeChild(document.body.querySelector('iframe'));}"
window.parent.document.body.appendChild(myscript);
window.parent.eval(removeIframe);
Use .contents().
$('iframe').contents().find('#test').remove();

Categories

Resources