Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.01.2011, 00:09
Новичок на форуме
Посмотреть профиль Найти все сообщения от Nightraven
 
Регистрация: 25.01.2011
Сообщений: 1

вставка картинок в 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 - тоже неплохо, но не обязательно
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery + iframe Fidel jQuery 6 12.10.2013 23:43
вставка картинок MegaGoblin Общие вопросы Javascript 4 27.04.2010 17:24
вставка картинок одним кликом MegaGoblin Общие вопросы Javascript 12 25.03.2010 13:20
Javascript запрещающий открывать iframe в новом окне. HELP! Андреи Events/DOM/Window 11 26.09.2009 07:36
как можно создать iframe со скриптами GOll Общие вопросы Javascript 2 05.05.2009 11:32