Change image on iframe with JQuery - javascript

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>

Related

Changing iframe src if page doesn't load

I've been using the code below to change an image src if the path is invalid. I'd like to do the same thing with iFrame srcs but can't get it to work. Any help appreciated.
<!DOCTYPE html>
<html>
<body>
<p>This example assigns an "onerror" event to an img element with an
incorrect src path, then changes the path to a default one that works.</p>
<img name="image" onerror="changeUrl()" src="http://www.xyziiijj.jpg">
<script>
function changeUrl() {
var site = "http://www.cw-testing.co.uk/SportsTickets-
testing/images/marker.png";
document.getElementsByName('image')[0].src = site;
}
</script>
</body>
</html>

how can I use a users input to change the last part on an iframe link?

I want the users input from the prompt to change the last part of the iframe's url. here is my code so far:
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:#ffffff
}
</style>
</head>
<body>
<!-- im attempting to make an iframe display a video the user types into
the prompt.-->
<p id="Video"></p>
<script>
var VideoURL = prompt("type the last part of the YouTube.com video
URL here");
if(VideoURL != null){
document.getElementById("Video").innerHTML= "you typed '' " +
VideoURL + " '' as your url.";
} else {
alert("please reload and type a URL.");
}
</script>
<iframe src="www.youtube-nocookie.com/embed/(I WANT THE USERS INPUT
HERE)" allowfullscreen></iframe>
</body>
</html>
I've been trying to do this for 3 days and still can't figure it out. please help.
It is possible to change the src attribute of an <iframe> using JavaScript and I think that is the best way of tackling your problem.
First off, I suggest giving your <iframe> an id to make it easier to retrieve.
For example: <iframe id="youtubePlayer" allowfullscreen></iframe>
If you have the user input stored in the variable VideoURL, you can use the following line of code to modify the src of the <iframe>
document.getElementById('youtubePlayer').src = "www.youtube-nocookie.com/embed/" + VideoURL;
First we are retrieving the element using document.getElementById(), then we are modifying the source by assigning a value to .src.
I hope this helps :)
You are just missing a single line at the end of your script that sets the src property of the iframe
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:#ffffff
}
</style>
</head>
<body>
<!-- im attempting to make an iframe display a video the user types into
the prompt.-->
<p id="video"></p>
<iframe src="www.youtube-nocookie.com/embed/" allowfullscreen></iframe>
<script>
// By placing the script just before the end of the <body>, all the DOM elements will
// have loaded by the time the script runs.
// Get user input:
var videoURL = prompt("type the last part of the YouTube.com video URL here");
if(videoURL != null){
// Get a reference to the iframe and reset its src property:
var frame = document.querySelector("iframe");
frame.src = frame.src + videoURL;
// Output the new URL
document.getElementById("video").innerHTML= "New src is: " + frame.src;
} else {
alert("please reload and type a URL.");
}
</script>
</body>
</html>
You'll have to assign the last part of the URL via a JavaScript variable, since you won't have it at page load when the HTML renders. The easiest way to do it would be to assign an ID to your iframe -- for example, videoFrame -- and then you could just do this:
document.getElementById('videoFrame').src = "www.youtube-nocookie.com/embed/" + VideoURL;

Change an iframe's src from another html file?

Well, I have my radio elements that update an iFrame with js code; and that works fine.
Then I have my button below that creates an iFrame in a HTML Division that contains a bunch o' buttons in a list, my aim is to click one of these buttons in the iFrame then have that button to update the above iFrame (the one controlled by the radio's).
How is this possible, can anyone help me? Thanks in advance.
Note: I've tried using <link rel="import" href="parentpage.html"> to import its ID's (if it does that?) then tried using JS to update it that way, to no avail.
What it looks like (layout wise)!
A simple way to do so is to get the button inside the iframe and set the event onclick like this
$(document.getElementById('iFrame2').contentWindow.document.getElementById("iFrame2Button")).click
(function ()
{
$("#iFrame1").attr('src','tests.php');
})
Assuming all the frames are in the same domain, this can be done like this:
<html>
<head>
<title>Main Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var change_iframe1_src = function(new_src) {
$("#iframe1").attr('src', new_src);
}
</script>
</head>
<body>
<!-- frame for which we will change src attribute -->
<iframe id="iframe1" src="" width="400" height="200" border="1"></iframe>
<!-- frame which includes your iframe2 with the buttons-->
<iframe src="iframe.html" width="200" height="200" border="1"></iframe>
</body>
</html>
Now in the iframe2 file attach a click handler for your buttons that should change the src attribute of the iframe1 by calling a function defined in the main page.
Example:
<html>
<head>
<title>iFrame 2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function(e) {
e.preventDefault();
// call function in a parent frame - IMPORTANT LINE BELOW :)
parent.window.change_iframe1_src(this.rel);
})
})
</script>
</head>
<body>
<button rel="iframe3.html">Change iframe src to iframe3.html</button>
<button rel="iframe4.html">Change iframe src to iframe4.html</button>
</body>
The links in the iframe 2 page call the function which is defined in the parent window (the main page / the window which embeded the iframe2 page itself). That function (change_iframe1_src in this example) takes one argument which is a new url.
The src attribute of the frame #iframe1 (your first frame) will be changed to this url.
Again, this works as long as all the frames are in the same domain.
Hope it helped :) Source

Unable to change the src of an img element using javascript

I am trying to write a piece of code which replaces an image with another image on page load. But unfortunately it does not happen so. The second image does not load. i only see an icon with a cross mark after pageload. Please have a look at the below code and let me know what's wrong. Thanks in advance.
<html>
<head>
<script type="text/javascript">
function loadImage()
{
document.getElementById('ab').src ="C:\Users\Gagan\Desktop\green.png";
}
</script>
</head>
<body>
<img Id= "ab" src="C:\Users\Gagan\Desktop\red.jpg" onload="loadImage()">
</body>
</html>
In JavaScript, backslash is the escape character. If you want to include it in a string, you have to escape it using itself:
document.getElementById('ab').src = "C:\\Users\\Gagan\\Desktop\\green.png";
For future viewers of this question, I would recommend the unobtrusive JavaScript pattern for this, where the onload is done completely in JavaScript:
<html>
<head>
<script type="text/javascript">
var img = document.getElementById('ab');
function loadImage()
{
img.src ="C:\\Users\\Gagan\\Desktop\\green.png";
}
img.onload = loadImage;
</script>
</head>
<body>
<img id="ab" src="C:\Users\Gagan\Desktop\red.jpg" alt="" />
</body>
</html>

Display iframe div contents on parent page

I'm sure this is pretty basic, but I can't seem to get any of the solutions I've found to work for me. Basically, I need to get the contents of a div from an iframe, and write them to a div in the parent page. This is what I have:
<iframe src="slideshows/slideshow/case2.html" frameborder=0 scrolling="no"
id="frame1" name="frame1"></iframe>
<div id="caption">
<script type="text/javascript">
var caption = frame1.document.getElementById('slidecaption');
document.write(caption);
</script>
</div>
'slidecaption' is the name of Id in the iframe that I'm trying to grab.
All I get is "null". Is it because the iframe contents haven't loaded yet? If so, how do I delay until the iframe has loaded?
Thanks,
Scott
Thanks to both of you for your help. I figured it out, based on Márcio's idea:
I put the function in the parent page:
<script type="text/javascript">
function send() {
document.getElementById('slidecaption').innerHTML =
frame1.document.getElementById('slidecaption').innerHTML}
</script>
And I put the call in the iframe document:
<body onload="parent.send();">
Regards,
Scott
I'm not sure this is the only thing you need to do, but you certainly need to retrieve frame1 from the dom.
<script type="text/javascript">
var frame1 = document.getElementById('frame1');
var caption = frame1.contentWindow.document.getElementById('slidecaption');
document.write(caption);
</script>

Categories