I have a html document as below. I want to change certain attributes of the "title iframe from the document present inside my title ifame html documet. But I am not able to change the iframe property from my title.php code which is present inside the titleFrame iframe. How can I do this?
<style>
iframe
{
width: 100%;
border: 0;
}
#titleFrame
{
position: absolute;
height: 100%;
top: 0;
left: 0;
background-color: red;
}
</style>
<body>
<div class='myDiv'> </div>
<img class='myImg' src='image.jpg' />
<iframe src="src/title.php" id="titleFrame" name="titleFrame" scrolling="No" noresize="noresize" title="title" />
<iframe src="" id="mainFrame" name="mainFrame" scrolling="Auto" title="mainFrame" />
</body>
<div class="titleDiv">
<span class='titleText'> Resource Management </span>
<span id='userNameDisp'> </span>
<input id='theTime' type=text value='' size=35 />
</div>
<?php
if(session_id() == '')
session_start();
if(isset($_SESSION['userName']))
{
echo "<script> ";
echo "$(\"#userNameDisp\").html(\"Welcome \"+\"".$_SESSION['userName']."<br/><span class='logOutClass'><a href='logout.php' target='mainFrame'> Logout </a> </span>\"); ";
echo "window.parent.document.getElementById('titleFrame').css('height','70px'); ";
echo "$('#titleFrame').css('background-color','#EFEFEF'); ";
echo "window.parent.document.getElementById('mainFrame').setAttribute('src','src/home.php'); ";
echo "</script></body> </html>";
return;
}
?>
The below javascript code worked for changing the parent iframe properties.
echo "window.parent.document.getElementById('titleFrame').style.height='70px'; ";