Refreshing Iframe With Script Inside A Parent Page_问答_开发者

Refreshing Iframe With Script Inside A Parent Page

开发者 https://www.devze.com 2023-02-11 01:51 出处：网络

I\'m working on a little something that will be part of an e-commerce website for an assignment. You will probably look at it and think I should just do it with JS, but we\'re told to use hardly any J

I'm working on a little something that will be part of an e-commerce website for an assignment. You will probably look at it and think I should just do it with JS, but we're told to use hardly any JS, and instead favor PHP especially when querying the SQL tables.

I'm building something where when a user mouseOvers() any of the images in the catalogue, a general iFrame refreshes with information based on the image that has the current focus - it does this by querying the database using a variable upon being loaded. This is where I've used JS to submit 开发者_开发知识库the form that refreshes an iFrame and, as PHP is parsed server side, upon being refreshed the information can be loaded seemingly dynamically to the user.

It all seems to be working except from the fact the target iframe does not get updated, but instead the page is loaded in a new tab or window in my browser (Firefox). NOTE: This code is a rough draft!

<div class="contentpane">


<div class="image1" onMouseOver="jsFunction();" onMouseOut="jsFunction2();">
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcStRUHQMqvpCvdCyEwkO9DFxy0IY9fg1CP3uePBktHRMz8QznlQ" width=100 height=100/>

</div>

<div class="image2">
</div>

<div class="image3">
</div>

<script>
function jsFunction(){

    document.forms['testform'].elements['i1'].value =  "mouseOver";
    document.forms["testform"].submit();
    // force refresh on Mouse Over
    /*var f = document.getElementById('testiframe');
    f.contentWindow.location.reload(true);*/

}

function jsFunction2(){

document.forms['testform'].elements['i1'].value = "mouseOut";
document.forms["testform"].submit();

}

</script>


<iframe src="iframetest.php" id='testiframe' width="200" height="200">
<!-- using this roundabout way with iframes so that all interaction with SQL is via PHP and not JS-->
</iframe>

<!-- hidden form that has a target of the iframe, submitted by the js functions-->
<form id="testform" method="GET" target="testiframe" action="iframetest.php" >
    <input type="hidden" id="i1" name="i1" value="hey"> <!-- retrieved in php file by $_GET-->
</form>

And the code for iframetest.php is:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>Home</title>
</head>

<body>

Dynamic content, will be pulled from SQL via PHP <br/> <br/>


<?php 
if(isset($_GET)){
echo $_GET["i1"];
} 
?>

Thanks for your help guys!

This task is screaming for ajax from miles away , but anyway here it goes: The content is getting displayed in a new page/tab is becouse you didn't specified the iframe name so you're code should look like this :

<iframe src="iframetest.php" name="testiframe" width="200" height="200">
<!-- using this roundabout way with iframes so that all interaction with SQL is via PHP and not JS-->
</iframe>

<!-- hidden form that has a target of the iframe, submitted by the js functions-->
<form id="testform" method="GET" target="testiframe" action="iframetest.php" >
    <input type="hidden" id="i1" name="i1" value="hey"> <!-- retrieved in php file by $_GET-->
</form>

p.s. notice the change in on the iframe tag from id='testiframe' into name="testiframe"