I have a problem. I have this function:
function isDone()
{
if(isDone){
$("#loadingStatus").html("NOT DONE...");
}else{
$("#loadingStatus").html("#isDone");
}
}
The above code does NOT work. The code above is checking if the content in an iFrame is done loading.
What i want is to have a div that says if it is NOT loaded "NOT DONE..." but if it is loaded then output another DIV into the #loadingStatus div.
UPDATE:
This is my 100 % code.
<?php
$key = $_GET['key'];
$s=mysql_query("SELECT * FROM advertisements WHERE `key`='$key'")
or die(mysql_error());
$r=mysql_fetch_assoc($s);
?>
<script type="text/javascript" src="../divided/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../dream/js/iframeLoad.js"></script>
<script type="text/javascript">
function isDone()
{
if(isDone){
$("#loadingStatus").html("Waiting for your advertisements to load...");
}else{
$("#loadingStatus").html($("#isDone").html());
}
}
</script>
</head>
<div style="height:10%">
<table style="border:black;">
<tr>
<td><img src="../dream/images/logo.png"></td>
<td><div id="loadingStatus"></div></td>
<td>3</td>
</tr>
</table>
<div id="isDone" style="display:none">
</div>
</div>
<iframe onload="isDone()" src="<?php echo $r['url']; ?>" width="100%" height="90%" scrolling="auto" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
You might be looking for:
$("#loadingStatus").html($("#isDone").html());
EDIT: In your code, isDone is a function, not a variable. From what I understand, you have to do something like:
$(document).ready(function() {
$("#loadingStatus").text("Waiting for your advertisements to load...");
});
function isDone()
{
$("#loadingStatus").html($("#isDone").html());
}
Because the function isn't called until the iFrame is loaded, the not loaded message will not appear.
You need to have some default text in the isDone div.
http://jsfiddle.net/sMGTU/
<?php
$key = $_GET['key'];
$s=mysql_query("SELECT * FROM advertisements WHERE `key`='$key'")
or die(mysql_error());
$r=mysql_fetch_assoc($s);
?>
<script type="text/javascript" src="../divided/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../dream/js/iframeLoad.js"></script>
<script type="text/javascript">
var iFrameLoaded=false;
function checkDone(iFrameLoaded)
{
iFrameLoaded
? $("#loadingStatus").html("Finished Loading")
: $("#loadingStatus").html("Waiting for your advertisements to load...");
}
</script>
</head>
<div style="height:10%">
<table style="border:black;">
<tr>
<td><img src="../dream/images/logo.png"></td>
<td><div id="loadingStatus"></div></td>
<td>3</td>
</tr>
</table>
<div id="isDone" style="display:none"></div>
</div>
<iframe onload="checkDone(true);"
src="<?php echo $r['url']; ?>"
width="100%" height="90%"
scrolling="auto"
frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
Well, NOTDONE will never appear because there is no isDone variable that can evaluate true. Also it seems that that logic is reversed.
Instead, set the "not done" message when your main document loads, then replace it with the "done" message when the iFrame document loads:
// on document load:
$(function() {
// set "waiting" message:
$("#loadingStatus").html("Waiting for your advertisements to load...");
// on iframe load:
$('#myIFrame').load(function() {
// set "done waiting" message:
$("#loadingStatus").html($("#isDone").html());
});
});
That's it; that's all the Javascript you need. Take that horrid onLoad attribute out of your iframe markup and give the thing an ID:
<iframe id="myIFrame" src="<?php echo $r['url']; ?>" width="100%" height="90%" scrolling="auto" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
function isDone()
{
if(isDone){
I think your problem may be that you have a boolean variable called isDone and your function definition variable is called isDone, one of these should be called something else.
Where is isDone variable set in the code? Do you have any load event handler for iframe?
Try this
$(function(){
$("#loadingStatus").html("Waiting for your advertisements to load...");
var isDone = false;
function checkIsDone()
{
if(isDone){
$("#loadingStatus").html("NOT DONE...");
}else{
$("#loadingStatus").html($("#isDone").html());
}
}
$("iframeSelector").load(function(){
isDone = true;
});
checkIsDone();
});
If you want to create a new div:
$("#loadingStatus").append($("<div/>").text("Done."));
If you want to move a div from somewhere else:
$("#loadingStatus").append($("#isDone"));
If you want to copy a div from somewhere else:
$("#loadingStatus").append($("#isDone").clone());
If you want to move the contents of an element:
$("#loadingStatus").append($("#isDone").children());
If you want to copy the contents of an element:
$("#loadingStatus").append($("#isDone").children().clone());
Update:
Seeing the rest of the code reveals some more problems with it. As you don't have any variable that determines if the content has loaded or not, and only call the function once the content is loaded, just put the code for changing the content in the function. Put the initial message directly in the element.
function isDone() {
$("#loadingStatus").append($("#isDone").children().clone());
}
Related
I am converting an old classic ASP website to asp.net/C#. This weeks problem with the conversion involves
replacing frames. A webpage (parent) spawns a popup using window.open.I am triggering the popup from a button on a gridview that runs this javascript:
<script type="text/javascript">
function popup(url, Title){" "}
{
(popupwindow = window.open(
url,
Title,
"status=no,menubar=no,width=1000,height=700,resizable=yes,scrollbars=yes"
))
}
</script>
That popup uses Frames (See example)
<frameset framespacing="0" border="1" frameborder="1" rows="36,*,0">
<frame name="Header" scrolling="no" noresize="false" target="main" src="ContentModules/<%=fsHeader %>" marginwidth="0" marginheight="0">
<frameset cols="140,*">
<frameset rows="*,27%">
<frame name="Menu" target="main" src="ContentModules/<%= fsMenu %>" marginwidth="0" marginheight="0" scrolling="no">
<frame name="RevTable" src="ContentModules/<%= fsRevision %>">
</frameset>
<frame name="main" src="ContentModules/<%= fsMain %>" marginwidth="5" marginheight="5" scrolling="yes" target="_self">
</frameset>
</frameset>
This site needs to be HTML 5 compliant and work with I.E and Chrome. So far, I am able to do just that. However,
I cant use Frames and meet those objectives.
I replaced the frames with Object Data.
<div id="header" class="header">
<object data="https://localhost:44365/HEADER.aspx" type="text/html" width="100%" height="100%"></object>
</div>
<div id="main" class="row">
<div id="column2" class="column left">
<div id="left_top" class="left_top">
<object data="https://localhost:44365/MainMenu.aspx" type="text/html" width="100%" height="100%"></object>
</div>
<div id="left_bottom" class="left_bottom">
<object data="https://localhost:44365/RevTable.aspx" type="text/html" width="100%" height="100%"></object>
</div>
</div>
<div id="column1" class="column right">
<object data="https://localhost:44365/MAIN.aspx" type="text/html" width="100%" height="100%"></object>
</div>
</div>
This works great, however, there is a problem that I cant figure out. We need to edit/save the MAIN Page. The button
to save or edit is on the HEADER page. I cant figure out how to get a click event on the HEADER page to run a saving method
on the MAIN page.
In the original ASP version, they use an environmental variable to change the button text from EDIT to SAVE.
They then use javascript to reload the entire popup so that it comes up in edit mode (or Save mode). I am not very knowledgeable on Javascript, but this seems an overhead heavy way of doing things.
function EditForm() {
window.location =
"/default.asp?windid=<%=windID%>&id=<%=id%>&ver=<%=ver%>&action=EDIT";
}
If the button was on the MAIN page, it would just be a simple on_click event. However, we have to duplicate the look and feel of the legacy
website. This means triggering an action on the MAIN page from an on-click event on the HEADER page.
Any help would be greatly appreciated.
#yob Adding revised Code, erroring out with Unable to get property 'Content Window' of undefined or null reference.
VRVMAIN.aspx (The Parent Page with the < Object Data > for Header.aspx and Main(default.aspx) Pages)
function messageHandler(message) {
console.log(" main page handler: ");
var data = message["data"];
console.log(" caller:" + (data["caller"] || ""));
console.log(" caller:" + (data["data"] || ""));
callMainPage(data);
}
if (window.addEventListener) {
addEventListener("message", messageHandler, false)
}
else {
attachEvent("onmessage", messageHandler);
}
function callMainPage(data) {
console.log(" Parent page(VRVMain.aspx) Calling Main(Default.aspx) Page");
document.querySelector('[data="https://localhost:44365/VRView/Content/types/default.aspx"]').contentWindow.postMessage(data, '*');
}
HEADER.aspx Page
function callContainer(){
console.log("calling container from header: ");
var data = { "caller": "header", "data": 1234 };
window.parent.postMessage(data, '*');
}
Default.aspx (Main Page)
function messageHandler(message){
console.log ( " main page(default) handler: ");
var data = message["data"];
console.log ( " caller:" + ( data["caller"] ||""));
console.log ( " data:" + ( data["data"] ||""));
callMainPage(data);
}
if (window.addEventListener) {
addEventListener("message", messageHandler, false)
}
else
{
attachEvent("onmessage", messageHandler);
}
since browser will not allow accessing object page (see blocked a frame from accessing a cross-origin frame), you could post a message to main page:
for example, in your header page:
<html>
<body>
<div>
header
<a href="#" onclick="callMain()" >header click</a>
</div>
<div>
<div>start main</div><hr/>
<object data="main.html" type="text/html" width="100%" height="50%"></object>
<hr/><div>end main</div>
</div>
<script>
function callMain(){
console.log ( " calling main from header: ");
var data = {"caller":"header", "data":1234};
//this will not work - blocked a frame from accessing a cross-origin frame -> document.querySelector('[data="main.html"]').contentWindow.clickHandler(data);
//instead - post message
document.querySelector('[data="main.html"]').contentWindow.postMessage(data, '*');
}
</script>
</body>
</html>
then, your main page (main.html) can listen for posted messages and process them:
<html>
<body>
<div>
main content
</div>
<script>
function messageHandler(message){
console.log ( " main page handler: ");
var data = message["data"];
console.log ( " caller:" + ( data["caller"] ||""));
console.log ( " caller:" + ( data["data"] ||""));
}
if (window.addEventListener) {
addEventListener("message", messageHandler, false)
}
else
{
attachEvent("onmessage", messageHandler);
}
</script>
</body>
</html>
Edited, based on additional comments...
If you have an "outer" container page, hosting header and main pages, then your header page needs to post a message to container page, which in turn, posts a message to main page:
for example, outer.html
<html>
<body>
<div>
outer container
</div>
<div>
<div>start header</div><hr/>
<object data="header.html" type="text/html" width="100%" height="50%"></object>
<hr/><div>end header</div>
</div>
<div>
<div>start main</div><hr/>
<object data="main.html" type="text/html" width="100%" height="50%"></object>
<hr/><div>end main</div>
</div>
<script>
function messageHandler(message){
console.log ( " container page handler: ");
var data = message["data"];
console.log ( " caller:" + ( data["caller"] ||""));
console.log ( " caller:" + ( data["data"] ||""));
callMainPage(data);
}
if (window.addEventListener) {
addEventListener("message", messageHandler, false)
} else {
attachEvent("onmessage", messageHandler);
}
function callMainPage(data){
document.querySelector('[data="main.html"]').contentWindow.postMessage(data, '*');
}
</script>
</body>
and header page needs to post a message on click:
<html>
<body>
<div>
header
<a href="#" onclick="callContainer()" >header click</a>
</div>
<script>
function callContainer(){
console.log ( " calling container from header: ");
var data = {"caller":"header", "data":1234};
window.parent.postMessage(data, '*');
}
</script>
</body>
</html>
I thank you for your help, but I am going to close this as unworkable. Because the main page has a dynamic URL based on its query string, I don't think the Query Selector can get a reference to it. Even though the Parent knows it a Main.aspx, it dynamically changes to a different page.
Trying to delete 3 elements that are inside an iframe. Function "Delete" responsible for deleting the elements called on the element body onload doesn't run.
<html>
<script>
<?php
echo"function delete(){
var elem0=document.getElementById('".$_GET['id']."').contentWindow.document.getElementById('".$id."');
var elem1=document.getElementById('".$_GET['id']."').contentWindow.document.getElementById('".$id1."');
var elem2=document.getElementById('".$_GET['id']."').contentWindow.document.getElementById('".$id2."');
elem0.removeChild(elem0.childNodes[0]);
elem1.removeChild(elem1.childNodes[0]);
elem2.removeChild(elem2.childNodes[0]);
}"; ?>
</script>
<body onload="delete();">
<div>
<?php
$page=$_GET['id'].".html";
$id=down;
$id1=gerar1;
$id2=gerar;
echo '<iframe src="' .$page.'" id="'.$_GET['id'].'" frameBorder="0" width="70%" height="100%" align="left" scrolling="no" />';
echo '</iframe>';
?>
</div>
<div>
<?php
echo'<iframe src="../../galeria/frame2_galeria.html" frameBorder="0" width="29%" height="600px" align="right" scrolling="yes" />
</iframe>';
?>
</div>
</body>
</html>
delete() is a keyword thats why your function was not call
Use different function name instead of delete
So its Works ...!
I think the problem is that the iframe is not loaded done.
You just need to add the onload event handler to the iframe or something like setTimeout and put delete into it:
iframe.onload = function() { delete(); };
that should work.
When i pressed a button in the iframe, it disappears the tag but doesnt resize the iframe size. when the ajax is done should call the AjustResizeIframeHeight method in the other page
Any suggestion to do that?
UPDATE
page with iframe
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
function AdjustIframeHeight(i) { document.getElementById("form-iframe").style.height = parseInt(i) + "px"; }
</script>
<iframe id"form-iframe" width="100%" style="border: none" src="{{ notes }}" onload='javascript:resizeIframe(this);'>
</iframe>
content the iframe:
<a href="#" onclick="xpto2(1,{{ n.id }});parentNode.parentNode.removeChild(parentNode)" >Don't show again</a>
<script>
function xpto2(status,noteid) {
var request = $.ajax({
....
});
request.done(function() {
window.parent.AdjustIframeHeight();
});
}
</script>
Added the window.parent.AdjustIframeHeight() in the ajax function, but it says "unresolved function or method"
When you AJAX call is done, it does nothing because you have an empty function.
getElementById("form- iframe") will find nothing because there is no element with id form- iframe.
If the page in your iframe has the same host, protocol and port, you should be able to access the function via window.parent.AdjustIframeHeight().
If host, protocol or port do not match, you have to use Window.postMessage from your iframe and listen for message events on the parent page.
Solved
The solution was to add a div and then call the div to the method
page with iframe
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
function AdjustIframeHeight(i) {parent.AdjustIframeHeight(document.getElementById("page").scrollHeight);
</script>
<iframe id"form-iframe" width="100%" style="border: none" src="{{ notes }}" onload='javascript:resizeIframe(this);'>
</iframe>
content the iframe:
<div id="page">
<a href="#" onclick="xpto2(1,{{ n.id }});parentNode.parentNode.removeChild(parentNode)" >Don't show again</a>
<\div>
<script>
function xpto2(status,noteid) {
....
});
request.done(function() {
request.done(function() {
parent.AdjustIframeHeight(document.getElementById("page").scrollHeight);
});
}
</script>
I have an upload button on my main page that submits to a php form, then returns the image back to the main page. What I am trying to do now is get the image element to load to an Iframe in the parent page as a variable that I can put in a div. Everything is functioning properly until the image will not display in the part of the Iframe, I think I am close but cannot see what is wrong in my code.
index.html
just the javascript , iframe, and id where the messages appears
<script type="text/javascript">
function updatepicture(pic) {
document.getElementById("image").setAttribute("src", pic);
$("#iFrameThingy").contents().find("#message").attr("src","photos/cw/briantest/" +pic);
}
</script>
<iframe id="iFrameThingy" src="Templates/template2/index.html" width="100%" height="4500" name="search_iframe"></iframe>
<p id="message">Upload message will go here.</p>
iframe.html
<script type="text/javascript">
function updatepicture(pic){
document.getElementById("image").setAttribute("src",pic);
}
</script>
--> Where I am trying to place the image
<div class="caption2">
<img id="productImage" id="images/product.png"alt="Product" height="416" width="417">
</div>
I had this working at one point but mistakenly changed something and now it is not working but I know I am close. Any help is appriciated
upload.php
<?php
if ($_FILES['file']['size'] > 0) {
if ($_FILES['file']['size'] <= 153600) {
if (move_uploaded_file($_FILES['file']['tmp_name'], "images/".$_FILES['file']["name"])) {
// file uploaded
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML = "";
parent.document.getElementById("file").value = "";
window.parent.updatepicture("<?php echo 'images/'.$_FILES['file']["name"]; ?>");
</script>
<?php
} else {
// the upload failed
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML = "<font color='#ff0000'>There was an error uploading your image. Please try again later.</font>";
</script>
<?php
}
} else {
// the file is too big
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML = "<font color='#ff0000'>Your file is larger than 150kb. Please choose a different picture.</font>";
</script>
<?php
}
}
?>
index.html (submit form)
<form id="form" method="post" action="upload.php" enctype="multipart/form-data" target="iframe">
<input type="file" id="file" name="file" />
<input type="submit" name="submit" id="submit" value="Upload File" />
Upload message will go here.
Change this line:
document.getElementById("image").setAttribute("src",pic);
to this:
document.getElementById("productImage").setAttribute("src",pic);
And change this:
<img id="productImage" id="images/product.png"alt="Product" height="416" width="417">
to this:
<img id="productImage" alt="Product" height="416" width="417">
You are using incorrect id there:
$("#iFrameThingy").contents().find("#message").attr("src","photos/cw/briantest/" +pic);
You should use productImage instead of message. Use this:
$("#iFrameThingy").contents().find("#productImage").attr("src","photos/cw/briantest/" +pic);
In my page I have a div with another div and an iframe as shown below.
<div class="v_dissc_tab" id="tabs-1">
<div id="publicevent">
<div class="crtraone" style="margin-left:800px;">
<button onclick="addpublic()">Add New</button>
</div>
<div>
<table width="100%">
<tr>
<td><b>Programme</b></td>
<td><b>Scheduled Start Time</b></td>
<td><b>Scheduled End Time</b></td>
<td><b>Amount</b></td>
<td><b>Status</b></td>
<td></td>
</tr>
<tr>
<?php if($publicnum>0)
{
}
else
{ ?>
<td colspan=6>
<?php echo "No any public channel programmes";?>
</td>
<?php }?>
</tr>
</table>
</div>
</div>
<iframe id="calendarframe" style="width: 100%;height:600px;display:none;" src="<?php echo base_url()?>index.php/channel/viewbookings">
</iframe>
</div>
On page loading, the div with id publicevent will be shown and the iframe is hidden. When I click on Add New button, the iframe will be loaded. Inside iframe I am loading another page which contains a button
<button onclick="managepublic()">Manage Public Events</button>
On clicking this button, I want to show the div with id publicevent and want to hide the iframe (as when the page is firstly loaded). Shown below is managepublic().
function managepublic()
{
location.reload(); // not making any changes
//$('#publicevent').show(); Tried with this also
//$('#calendarframe').hide();
}
Can anyone help me to solve this. Thanks in advance.
dont' use location.reload ,use only following code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
function managepublic()
{
$('#publicevent').show();
$('#calendarframe').hide();
}
On clicking this button, I want to show the div with id publicevent
and want to hide the iframe (as when the page is firstly loaded).
Check if this helps.
$('iframe').attr( "src", "http://www.apple.com/");
$('iframe').load(function() {
$('iframe').show()
$('#loaded').hide();
});
$('#button').click(function() {
$('#loaded').show();
$('iframe').hide();
});
JSFiddle
Try the following code snippet.
You are referring elements of <iframe>'s parent.
function managepublic(){
$('#calendarframe', window.parent.document).hide(250, function() {
$('#publicevent', window.parent.document).show();
});
}
Or
function managepublic(){
window.parent.$('#calendarframe').hide(250, function() {
window.parent.$('#publicevent').show();
});
}
Or Change the order of the hide events.
function managepublic(){
window.parent.$('#publicevent').show();
window.parent.$('#calendarframe').hide();
}
Note :
For this to work, parent must have jQuery included.
It won't work if parent is in different domain.