Set img src of another page using javascript - javascript

I am trying to change the src of an image using javascript. The image and the javascript function are in different html pages.
The javascript function is given below
<html>
<head>
<script type="text/javascript">
function changeImage(newSrc)
{
document.getElementById(dp).src = newSrc;
}
</script>
<title>Socialize-Home</title>
</head>
<body>
<img id="img1" src = "home images\student1.JPG" onclick="changeImage(this.src)"></img>
</div>
</body>
</html>
The image of another page is given below
<img id="dp" src="home images\unknown user.JPG" alt="Your browser doent support this
image !" height="25%" width="15%"/>

If you're using AJAX, it puts the second page into the first. There is therefore no need to do anything special. The AJAX'd in content is inside the page and so can be accessed how you would normally access elements.
Therefore your idea should work. However, you have a slight syntax error:
document.getElementById(dp).src = newSrc;
should be:
document.getElementById('dp').src = newSrc;
dp is a string, you haven't defined a variable called dp.
On a side note, the alt tag for an image isn't really anything to do with your browser "not supporting" images. The alt text is displayed if the image is missing or if the user is visually impaired and is using a screen reader.

You need to have some reference to the other window, for instance you can have the window set opener.childwindow = self in the window with the target image. Or whatever you have to do.
Then it's just referenceToOtherWindow.document.getElementById('dp').src = newSrc;

Related

Remove style of html tag of iFrame

I've got a iFrame on my page which is coming in from an external source and when the iFrame is loaded it's coming in with it's 'own' styling classes and I'm trying to remove one of the classes what it has. So when the iFrame loads the HTML looks like this:
<iframe style="background-color:#fff !important" id="myFrame" src="http://salonspy.co.uk/widget?i=72108" frameborder="0" height="270" width="320">
#document
<html> <!---THIS IS THE TAG I'M TRYING TO GET A HANDLE ON!-->
<head>...</body>
<body>...</body>
</html>
</iframe>
The html tag has a background color applied to it (by the external css) and I'm trying to remove this background-color (or apply a transparent one) but I can't seem to get 'hold' of this tag.
I've got some jQuery that waiting for the iFrame to load but I don't know what to enter to apply this new style.
$(function() {
$("#myFrame").bind("load",function(){
//$(this).contents().find("[tokenid=" + token + "]").html();
alert("iFrame loaded");
//$(this).contents().find("html").css("background-color","white");
var src = $('#myFrame>html').html();
alert(src);
});
});
Could someone assist please?
Thanks.
Moving from comment to answer.
If you are accessing salonspy.co.uk from within the same origin, you may access the HTML contents by calling the inner HTML:
Plain JavaScript
document.getElementById('myFrame').contentWindow.document.bo‌​dy.innerHTML
jQuery
$('#myFrame').contents().find("html").html();

If your img tag is automatically generated during runtime can you change the src using JQuery/JScript?

I have an html page that doesn't contain an image until the page actually loads, and then once you inspect the source you see:
<img src="http://s5.parature.com//ics/cm/images/bt/button2_online.gif" class="available" alt="Chat Help is available" title="Chat Help is available" style="border: medium none">
I'd like to try and change the img src from what it is, to the same thing but make it https. I added my javascript AFTER this displays but it doesn't work and I'm not sure if it's supposed to or if it's even possible. Actually I'm using JQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$("#available").attr('src', 'https://s5.parature.com//ics/cm/images/bt/button2_online.gif');
</script></div>
The code that actually calls the img and places it into the html at run time is this:
<a id="b2b8839e-6318-4c34-9863-9071b06192f3" href="javascript:void(0);" onclick="return launchChatWindow('https://com.parature.com/ics/support/default.asp?deptID=15028&task=chat&deploymentId=b2b8839e-6318-4c34-9863-9071b06192f3');"></a>
<script src="https://de.com.edu/js/chatDeployment.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = createDplOnLoadDelegate('b2b8839e-6318-4c34-9863-9071b06192f3', 'com.parature.com', 15026, 15028, window.onload, true);
</script>
But that's all I have access to since the img is called/generated at run.
$("#available") is incorrect.
the wildcard "#" refers to the "id" attribute, while "." refers to a class.
The "id" attribute makes the only element, so "class" is used for multiple elements.
Your condigo would like this: $(".available")...

dynamic IFRAME content - how to get the access to that IFRAME?

I'm loading a content dynamically to the <iframe>
<iframe style='border:none;' id='abc' src="http://localhost:39217/Home/GetContent/some_dynamic_code"></iframe>
after a success response, in that iframe is that content
<html>
<head>
<script type="text/javascript">
function onPageLoad() {
if (document.readyState === "complete") {
var cont = document.getElementById("abc");
alert(cont);
}
}
</script>
</head>
<body onload='onPageLoad()'>
<a target="_blank" href='http://lorem'>
<img class='abc' style='max-width:300px; max-height: 38px;' alt='' src='/Images/image.png' />
</a>
</body>
</html>
That iframe will be using outside my site (by users), but I want to have the ability to change the <img> src. But, I need also to change the width/height of the iframeafter I change the image. So, how can I get the access to that iframe using JS ? That code above alerts me null
I made an example for you here: http://jsfiddle.net/KRaWU/2/
I use jQuery to achieve that and I suggest you do the same.
// this will find a button within an iframe
var obj = $('iframe').contents().find('.actionButton').find('input[type="submit"]');
// this will change the value of the button, and you can see that the text is changed.
obj.attr('value', 'LOG ME IN');
You can analogically find an img and change its src.
JS interaction between iFrames and their parents is for what I know impossible or at least troublesome. I know there is somewhere a property window.frames and maybe even frame.parent but in general, JS interaction like that is impossible. I think you should consider another type of solution (like an ajaxcall maybe, if that could satisfy your needs).

Copy images from iframe into textarea

I would like to copy images from a iframe into a textarea. The pages and the iframe are not on the same domain or server.
Any ideas on how to achieve this using javascript?
The iframe with images is using ajax to collect images.
Usage:
For example I would like to use this method to copy images from a iframe into the tinymce text-editor of wordpress. Eg. display a iframe with a image gallery under the text-editor, and when they click on the image in the iframe the image should display in the text-editor (the image is alredy uploaded).
Some ideas:
Drag and drop the images seams to work in IE and FF.
Rightclick, copy and past images seams to work in IE and C.
It would be nice if I could get the src of the image in a variable, to be able to add "class" and "alt".
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Copy images from iframe</title>
</head>
<body>
<textarea style="width:100%;height:400px" >I want to be able to get theme here like this
<img src="http://www.page.com/image.jpg" alt="">
</textarea>
<iframe width="100%" height="400px" src="http://www.page-with-images.com/"></iframe>
</body>
</html>
Try using jQuery.
Add a click event to $("iframe img"). In the click function, get the image's src and append that as an image tag to the tinyMCE editor.
This would look something like this:
$(function(){
$("iframe img").click(function(){
var update = $("<div>").append(
$("<img>").attr("src", $(this).attr("src"))
).html();
$("#content").val(function( i, v ) {
return v + update;
});
});
});
Example..
We're pretty much cloning the image, placing it in a temporary div, getting the pure HTML content of the div (so that we convert the image object to a usable string), and updating the textarea's value with it. Of course, in the demo I linked, #fake is the equivalent of an iframe in this case.

move input text from iframe to main window

I have an iframe on a page that allows us to upload an image, once it's uploaded it displays the url of the file in a text input field.
On the main part of the page, we have our textarea where we write up our news posts. I'd like a way so that I can add a link on the iframe, next to the url field, that when clicked will automatically insert the text in there into the textarea on the main part of the page.
I'm relatively new to javascript, so I wasn't sure how to do this when using an iframe.
Thanks!
Main.htm
<html>
<head>
<script>
getText = function(s)
{
alert(s);
}
</script>
</head>
<body>
<iframe src="otherFrame.htm"></iframe>
</body>
</html>
otherFrame.htm
<html>
<head>
<script>
botherParent = function()
{
parent.getText(document.getElementById("textInput").value);
};
window.onload = function()
{
}
</script>
</head>
<body>
<input type="text" id="textInput" />
<span onclick="botherParent()">Stuff goes here</span>
</body>
</html>
Basically, in the child inline frame, use parent to access the parent's window object.
Global variables are stored in window, as are global functions. Because of this, if you define a global variable "foo" in parent, you can access it with parent.foo with your child frame.
Hope that helps!
Assuming I understand this correctly you want to be able to use javascript to access information in an iFrame from the container page. This is generally regarded as Cross Site Scripting and is not allowed.

Categories

Resources