Cant delete elements inside a iframe with javascript written in php - javascript

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.

Related

How to run a script on image?

This script below slides and rebuilds a div with a Youtube video when I press a button.
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('#slide_up').click(function(){
$('#slidingDiv').slideToggle('', function (){
var obj = $(this);
if(obj.is(':hidden')){
obj.html( obj.html() );
}
});
});
});//]]>
<div style="display: block;" id="slidingDiv">
<iframe src="http://www.youtube.com/embed/r13a2VUTajU" allowfullscreen="" frameborder="0" height="315" width="560"></iframe>
</div>
<input value="Slide and rebuild" id="slide_up" type="button">
I want to use an image instead of a button.
How should I modify a script to run a slide function after I click on img?
Thanks ;)
<input value="Slide and rebuild" id="slide_up" type="image" src="yourimage.jpg">
This should work. Unless I didn't understand the question
You have to use the onclick attribute
<img src="your src" onclick="your javascript function" />

Loading image from parent frame to child

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);

Hide form from parent page until specific iframe element ID loads

All I need is to show parent page form only if specific element ID loads inside iframe. parent/iframe are on the same domain. How can I achieve that using javascript?
<form id="Search" action="../search.php" target="my-iframe" method="post">
<input type="text" id="location" name="keywords[all_words]" />
<a href="#" onclick="document.getElementById('Search').submit()" >Search</a>
</form>
<iframe id="myiframe" src="../page.html" name="myiframe" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
You can use jQuery to attach a load event to the iframe. Here's a working example: http://jsfiddle.net/kPqbS/
You can use something like this:
// wait for the page to finish loading
window.onload = function(){
// hide your form
document.getElementById('Search').style.display = 'none';
// get the document of the iframe
var frameDocument = document.getElementById('myiframe').contentWindow.document;
// if this is true the element with id 'test' is in the frame
if(frameDocument.getElementById('test')){
// show your form
document.getElementById('Search').style.display = 'block';
}
}

JavaScript Function - Change content in a DIV

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());
}

Not defined? Submit iframe from modal box post to iframe

I have
<iframe src="correctdata.php" frameborder="0" width="100%" height="330" id="correctdata"></iframe>
<div class="floatright"><a class="button bigger" onclick="window.frames['correctdata'].document.form['correct'].submit();">Submit</a></div>
And correctdata.php contains a form
<form method="post" action="correctdata.php" name="correct" id="correct"></form>
(There is other stuff, but I'd much rather not post it.
Yet when I press submit I get
window.frames.correctdata is undefined
[Break On This Error] window.frames.correctdata.document.form.correct.submit();
try your with "jQuery(...)contents()"
Html:
<iframe src="correctdata.php" frameborder="0" width="100%" height="330" id="correctdata"></iframe>
<div class="floatright"><a class="button bigger" id="submit-iframe">Submit</a></div>
JS:
$('#submit-iframe').bind('click', function(ev) {
ev.stopPropagation();
var correctForm = $("#correctdata").contents().find("#correct");
if (correctForm.length == 0)
alert('error');
else
correctForm[0].submit();
return false;
});
When the iframe is loaded, provided the content document is from the same origin, you should be able to access the content within it. You can do so by limiting the jQuery context like so:
$('#idInTheIframe', $('iframe')[0].contentDocument);
For a live example, see http://jsfiddle.net/jsumners/hSEmH/.

Categories