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.
Related
Chrome v75 appears to have introduced a bug whereby if you replace an iFrame's src programatically, it will replace the entire page instead of the iFrame.
This didn't happen on v74 and I can't get a test case to work (yet), it just fails in our site. (The site hasn't changed since going from v74 to v75, only Chrome has changed)
It appears to work fine the first time but then when you change it again (in our case viewing report drill downs) it causes the entire page (i.e. the iFrame's Parent) to load the src you were trying to load into the iFrame.
It also doesn't matter if you use pure Javascript or (in our case) JQuery, both cause the same issue.
EDIT: After a few hours detective work, I've found the bug. Setting the tag in the iFrame's content causes Chrome to load the iFrame's content into it's parent rather than the iFrame itself.
I've setup a Plunker account with a demo: https://plnkr.co/edit/UQ0gBY?plnkr=legacy&p=info
Just so I can post the link to Plunker, here is the code for the main file & the iframe content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onLoaded() {
// find element
let button = document.getElementById("button");
button.addEventListener("click",function(e){
// Add a random number on the end as a cache buster
document.getElementById('frame-finance-custom').src = 'test2.html?rnd=' + Math.random();
},false);
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
</head>
<body>
<div>IFrame Src Changing Test</div>
<div>
<div id="div-frame-finance-custom" style="float:left;width:33%">
<iframe id="frame-finance-custom" name="frame-finance-custom" class="iframe"
style="border:1px solid black; width: 100%; height: 350px; overflow-y: scroll; vertical-align: top;">
no data
</iframe>
</div>
<div style="float:left;margin-left:1em;">
Detail: Loading an iframe page with a <Base> tag in it with target set to "_parent" will cause any refresh of that frame to replace the parent document<BR>
<BR>Instruction: <UL><LI>Click the 'Update Frame' Button, this will load test2.html into the frame. <LI>Click it again & it will replace the iframe's parent with the content of the iFrame.</UL>
<BR>Confirmation: Remove the <Base> tag from the header of test2.html & reload, it will work as expected.
</div>
</div>
<br clear=both>
<div>
<button id="button">
Update Frame
</button>
</div>
</body>
</html>
IFrame Content (test2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_parent"/>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>This is the frame content</div>
</body>
</html>
Note, using their new layout it doesn't work, but using their legacy layout it does. Feel free to save the files locally and use chrome directly too.
Ok, so this turned out to be a bug in Chrome rather than anything else, so yes, strictly not a SO question, but seeing as SO ranks so well in Google (other search engines are available), I thought it better to leave it here as a solution rather than simply delete it, just incase anyone else has a similar problem.
The reason is outlined as an edit in my question, the solution is to remove the <base target="_parent"> tag from the iFrame and programatically add the 'target="_parent"' attribute to any links in the iFrame.
We do this via jQuery, I'm sure its just as easy via vanilla Javascript.
$('a').attr('target','_parent');
Add that to the javascript that runs when a page has loaded and it'll replace add target="_parent" to any links on the page.
e.g.
<script>
function onLoaded() {
// find all links and add the target attribute
$('a').attr('target','_parent');
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
As #Kaiido says in his comment, its apparently fixed in Chrome v77, but this isn't the current (as of June 2019) stable release, so we've had to add the workaround into production so that our CRM works with Chrome v75. Thanks to #Kaiido for confirming that.
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.body.innerHTML
jQuery
$('#myFrame').contents().find("html").html();
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;
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).
i've this simple piece of code that don't work in Internet Explorer, but do work in Chrome, Firefox etc.
It is a simple button image 'rollover' .
<html>
<head>
</head>
<body>
<img src="p1.png" name="img1" onMouseOver="document.images[0].src='p2.png'" onMouseOut="document.images[0].src='p1.png'" ></a>
</body>
</html>
What's wrong in IE 6,7,8 ?
Change your code to this:
<html>
<head>
</head>
<body>
<img src="p1.png" name="img1" onMouseOver="this.src='p2.png'" onMouseOut="this.src='p1.png'" />
</body>
</html>
Also, I if your HTML page contains more data the the HTML page you've showed in your question, I suggest you put this code in the beginning of the <body> in order to preload the rollover image so there will be no delay when you want the rollover to work (otherwise, the rollover image will be downloaded to the user's device only when he hovers the image, causing a slight delay to the rollover (depending on the onMouseOver image size)):
<img src="p2.png" class="hiddenPic" />
<!-- loading (hidden) rollover image before all the other page data -->
And add the CSS hiddenPic class code: .hiddenPic { display: none; }
Other methods to preload the rollover image can be done using CSS or the JavaScript onLoad event handler.
onmouseover="this.src='p2.png'"
Use this instead of document.images....
Another method (works if you need to rollover change something else as well):
<img src="p1.png" name="img3" id="img3" onMouseOver="document.getElementById('img3').src='p2.png'" onMouseOut="document.getElementById('img3').src='p1.png'" >
http://jsfiddle.net/DNtUY/5/ (3 examples, yours, Said's, this one).
PS. Your open tag is <img ...> but the close tag is </a>
Maybe if the images are not that heavy, you might try a different approach like declaring both images and hide one of them. Then with javascript when you roll over the visible image, you hide it and show the other one.
Perfectly working code for your question mr.Stighy:
<html>
<head>
<style type="text/css">
</head>
<body>
<img src="../a_b_c/a.jpg" alt="" onMouseOver="this.src='b.jpg'" onMouseOut="this.src='a.jpg'" onClick="this.src='c.jpg'" class="style1"></a>
</body>
</html>
I think we messed up with the images, that's it... p.s. Giulio is waching you.