Javascript-форум (https://javascript.ru/forum/)
-   Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)
-   -   вставка картинок в iframe (https://javascript.ru/forum/css-html-internet-explorer/14679-vstavka-kartinok-v-iframe.html)

Nightraven 26.01.2011 00:09

вставка картинок в iframe
 
Есть задача: сделать строку редактирования сообщений чата со вставкой смайлов. Причем смайлы должны быть видны в нормальном виде (то есть в виде картинки) прямо в поле ввода.
Задачу я решил выполнить на основе iframe в режиме designMode="On". Картинки смайлов вставляются щелчком мышкой по соответствующему смайлу. При нажатии на кнопку редактируемое содержимое переносится в поле input, а сам iframe отчищается.
Все замечательно работает, во всех приличных браузерах картинки вставляются и можно дальше продолжать редактировать сообщение, кроме IE. У этого чудного браузера картинки тоже замечательно вставляются, но при этом они сохраняют фокус на себе. То есть чтобы продолжить редактирование надо сначала "сдвинуть" курсор в сторону например стрелками на клавиатуре или мышкой, что не есть удобно.
Итак вопрос в следующем: Как сдвинуть курсор со вставленной картинки в IE?
Ниже представлен код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iFrame</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<style>
	body,html {margin:0;padding:0;width:100%;height:100%;}
	#layout {margin:0;padding:0;width:500px;height:300px;border:double 3px #F00;background:#FF0;overflow:auto;}
	#text {width:500px;}
</style>
</head>
<body>
<div id="layout">
	<iframe id="iFrameID" name="iFrameID" frameborder="0" allowtransparency="true" width="100%" height="100%" scrolling="auto" marginheight="0" marginwidth="0" hspace="0" vspace="0"></iframe>
</div>
<img src="group/beer.gif" alt="" /><br />
<input id="text" type="text" /><br />
<input id="button" type="button" value="Button" /><br />
</body>
<script type="text/javascript">
$(document).ready(function(){
	var isGecko = navigator.userAgent.toLowerCase().indexOf('gecko') != -1;
	var iframe = (isGecko) ? document.getElementById('iFrameID') : frames['iFrameID'];
	var iWin = (isGecko) ? iframe.contentWindow : iframe.window;
	var iDoc = (isGecko) ? iframe.contentDocument : iframe.document;
	var iframeDoc='<head><style>body,html {margin:0;padding:0;width:100%;height:100%;}body {background:#3C9;}</style></head><body id="frameBodyID" class="frameBody"></body>';
	iDoc.open();
	iDoc.write(iframeDoc);
	iDoc.close();
	iDoc.designMode = (isGecko) ? "on" : "On";

	// Обработка кликов
	$('img').click(function(){
		iWin.focus();
		iWin.document.execCommand('InsertImage', false, $(this).attr('src'))
	});

	$('#button').click(function(){
		iWin.focus();
		var iFrameContents=iDoc.getElementsByTagName("body")[0].innerHTML;
		$('#text').val(iFrameContents);
		iDoc.getElementsByTagName("body")[0].innerHTML=''
	})
});
</script>
</html>


PS: решение необходимо только под современные версии браузера IE, то есть для IE8, хотя если будет работать и в IE7 - тоже неплохо, но не обязательно :)


Часовой пояс GMT +3, время: 17:01.