I created a small widget which is basically a php file which contains an HTML AJAX based form. The form's height depends on the output of the AJAX response text.
Therefore, I need to change the height dynamically.
I tried to do that with some code and it works really well BUT only on localhost file.
This code works:
<iframe src="ajax/cfw.php" id="idIframe" width="400px" onload="iframeLoaded()" style="border: none;"></iframe>
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
However when I try to do an iframe of the exact file I pointed on my localhost which doesn't hosted on my localhost it doesn't work:
<iframe src="http://website.com/ajax/cfw.php" id="idIframe" width="400px" onload="iframeLoaded()" style="border: none;"></iframe>
Why is that, and how can I fix it ?
Thanks.
Related
I have attach iframe to my site and I have try many time to put value to iframe text box. But not working, Is there any way to put value to iframe.
I have try with
var test = $('#text').contents();
test.value="WELCOME";
Here My example.com/test/index.html
<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<label>Filed1
<label>
<textarea id="text"></textarea>
</div>
</body>
</html>
My iframe:
<iframe id ="test" width="350" height="400"
src="www.example.com/test/index.html" frameborder="1" ></iframe>
For IFrame there is a property named contentWindow, as so the frame contains the whole html page inside ; and there is the document which you can access to the inner contents of the iframe.
// html:
// <iframe id="a"></iframe>
var f = document.getElementById("a");
var fd = f.contentWindow.document;
to clear the content or address the src :
// clear content
element.src = "about:blank";
to write the content:
// write new content
var newHtml = '<html><body><textarea id="aa">Hello</textarea></body>'
f.contentWindow.document.open();
f.contentWindow.document.write(newHtml);
f.contentWindow.document.close();
and to access inner content elements:
fd.getElementById("aa").value = "orange";
// or in JQuery :
$("#aa",fd).val("Hello again");
Have you tried val ?, it will work on only same domain link !
$('#test').contents().find('#text').val('WELCOME');
Please make sure you put the javascript AFTER the iframe or put this in a onload event called from the iframe
thanks :)
I'm new to JavaScript and I cannot understand why my html isn't changing?
I have an Iframe and I'm trying to change the .innerHTML of the span class that the Iframe has created in the DOM.
In the DOM structure, the class is called <span class="weather-location">China</span>
I'm just trying to access this by changing it's innerHTML to Taiwan instead.
here is my code:
<html>
<head>
<title>test</title>
</head>
<body onload="myFunction()">
<iframe class="weather" width="100%" height="600px" frameBorder="0"
src="(this is my iframe src code)></iframe>
<script type="text/javascript">
function myFunction() {
document.getElementsByClassName("weather-location")[0].innerHTML = "Taiwan";
}
</script>
</body>
</html>
When I test it in the console log, it brings up that weather-location as [] but whats also bizarre is when I use the selector tool to hover on that weather-location class and go back and re-type in the code it in the console, it changes the class how I wanted?
Also, I don't know if this helps but when it shows up as [] in chrome a little i box pops up saying "value below was evaluated just now".
You can't change the innerHTML of iframes if it's on another domain.
https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe
This kind of iframe is like a window into another webpage you have no control over.
If it is on the same domain you can use something like
var ifr = document.getElementById( yourIframeId );
var ifrDoc = ifr.contentDocument || ifr.contentWindow.document;
var theForm = ifrDoc.getElementById( yourFormId );
SO Question: accessing a form that is in an iframe
Credit to : #le_m
I need to change an image with jQuery when I click on image of my webpage I need that the page show me a prompt, alert... or similar where I put the new path of the new image.
Anyone have any idea?
I show my code where I change paragraphs and headers with Jquery, I need similar but for images.
$("#probando").contents().find("#cabecera1").click(function () {
var nuevoTexto = prompt("Introduzca el nuevo contenido");
$("#probando").contents().find("#cabecera1").text(nuevoTexto);
});
The image that needs changed is in an frame.
<iframe id="probando" src="prueba2.html" scrolling="auto" height="700" width="750" marginheight="0" marginwidth="0" name="probando"></iframe>
Something I don't understand :
You have to click on an image which is in a frame, and when you do, a prompt appears to write a new path for the image. When the prompts submitted, the image changes of src, is that it ?
In that case, you can directly write the code on the frame's included page.
$().ready(function() {
$('#imageId').click(function() {
var newPath = prompt('Please enter new path for image :');
$(this).attr('src',newPath);
});
});
If it's not the case, please explain what's the structure and what is where =)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<title>iframehide</title>
<script type="text/javascript">
$(function() {
var f = $('#foo')
f.load(function() {
f.contents().find('div').hide();
})
})
</script>
</head>
<body>
<iframe id="foo" src="iframehide-frame.html" /></iframe>
</body>
</html>
I am developing an online HTML editor. For this, I have used a form element. Inside the form, there is a Textarea which will contain HTML codes and an Iframe which will render the HTML code. The target of the form is the Iframe.
This is my code in the editor:
<form id="edfrm" method="post" action="/source.php" target="frame">
<textarea name="code" id="code"></textarea>
<iframe allowtransparency="false" src="/source.php" name="frame" id="frame"></iframe>
<button id="subbutton">Submit</button>
</form>
When the form is submitted the value of the Textarea goes to source.php, the Iframe collects source code from source.php and renders result.
Here is the source.php:
<?php
$runCode = #$_REQUEST["code"];
print $runCode ;
?>
But when I write HTML codes with 'script' tag or 'iframe' tag in the Textarea and submit the form, my project does not work. The error says, "Failed to load resource: the server responded with a status of 403 (Forbidden)". When I remove the 'script' or 'iframe' tag it works fine.
Please help me if I am facing a server problem, PHP configuration problem or other. SVG also works, but what is the problem for 'script' and 'iframe'?
I think, IT'S A VERY SERIOUS PROBLEM FOR ME AND OTHERS LIKE ME. PLEASE HELP!
Example: I am writing this code in the textarea.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id = "canvas1" width = "200" height = "100" style = "border-style:solid; border-width:1px;">
</canvas>
<script>
var cnv = document.getElementById("canvas1");
var ctx = cnv.getContext("2d");
ctx.beginPath();
ctx.arc(100,50,40,0,2*Math.PI,true);
ctx.strokeStyle = "Green";
ctx.lineWidth = "10";
ctx.stroke();
ctx.fillStyle = "Yellow"
ctx.fill();
</script>
</body>
</html>
And this is not working and giving error. When I remove the script tag, the code runs.
If i understand correctly:
U post your content to source.php.
The result code contains an iframe with an attribute
src="source.php"
So your page and your iframe both takes source from source.php.
That causes a loop so that is normal that u take 403. Please change your iframe's src attribute to anything else and try again.
I'm passing a disclosure page through an iframe on an html page:
<iframe src="../disclosures/Pass_CO_GRN.html" name="disclose" width="790" marginwidth="0" height="400" marginheight="0" scrolling="Auto" id="disclose" frameborder="0" ></iframe>
I would like to add attach a datetime method to the src attribute to be sure the asset being passed (Pass_CO_GRN.html) does not cache in the client browser. The way I do this with the linked .js file (which I also don't want cached) is:
<script type="text/javascript">
document.write('<script language="JavaScript" src="linksHLS4.js?'+(new Date).getTime()+'"><'+'/script>');
and this works perfectly. I'm just not sure how to adapt it (if it CAN be adapted) to the iframe tag. anyone know?
document.write('<iframe src="../disclosures/Pass_CO_GRN.html?'+new Date().getTime()+'" ....></iframe>');
Surely.
Here is the jsFiddle. Is this what you are looking todo?
http://jsfiddle.net/2S5H5/
var frame = document.getElementById("myframe");
frame.src = "http://jsfiddle.net/user/signup/?" + new Date().getTime();