How to capture an image(url) inside iframe?
How to capture an image(url) inside iframe?
HTML
<span id="imgExistMessage" style="font-size: 15px; font-weight: bolder; color: Red;
display: none;">Image has been already selected.</span>
<br />
<textarea id="content" cols="50" rows="20">
</textarea>
<div id="MainContent_IFTrendAnalysis">
<img src="https://lh3.googleusercontent.com/-ZkMSKCbY0Y8/TRCpCX5p35I/AAAAAAAAABQ/ZL2nsL-ir7U/s277/3.jpg"
width="100" height="100" />
<img src="https://lh5.googleusercontent.com/-y301Ju4n32g/TRCtzBfoiZI/AAAAAAAAABc/3tGEuAD3R8I/w487-h365-k/51.jpg"
width="100" height="100" />
<img src="../../Images/Desert.jpg" width="100" height="100" />
</div>
<!-- <iframe id="MainContent_IFTrendAnalysis" src="http://api.jquery.com/append/" width="300px"
height="500px"></iframe>--><div class="ms-rtestate-read ms-rte-embedcode ms-rte-embedil ms-rtestate-notify s4-wpActive" contenteditable="false">
<iframe width="540" height="303"
src="https://dev.toolbox.inter-ikea.com/sites/content/PublishingImages/Test_Video_1_MP4/Preview%20Images/Test_Video_1_MP4_mp4.png"
type="text/html" data-title="Test_Video_1_MP4" data-duration="5" ></img>
</div>
JavaScript
$(document).ready(function () {
$('#MainContent_IFTrendAnalysis').find('img').live('click', function () {
var obj = $(this);
$('#content').val(function (i, value) {
if (($.trim(value).length === 0) || ($('<div>' + value + '</div>').find('[src="' + obj.attr('src') + '"]').length === 0)) {
return value + $('<div></div>').append($('<img />', { 'src': obj.attr('src') })).html();
}
else {
$('#imgExistMessage').fadeIn(500).fadeOut(500);
return value;
}
});
});
});