TextRange offsetLeft и offsetTop не работает в стандартном режиме Internet Explorer 8 (IE8)
Кажется, я обнаружил проблему с Internet Explorer 8 при поиске положения диапазона текста - например, выделенного в данный момент текста. Я не нашел ни одного сообщения об этой проблеме ни в StackOverflow, ни где-либо еще.
TextRange.offsetLeft и TextRange.offsetTop сообщают о левом и верхнем углу диапазона, и во всех случаях, которые я видел в IE8, они примерно верны,except in the case when the range is within an IFrame, Когда диапазон находится в пределах IFrame, значения для offsetLeft и offsetTop сдвигаются на отрицательную величину относительно положения IFrame в его родительском элементе. (См. Пример ниже)
Эта проблема появляется только когда:
The browser is IE8 The page is in standards modeЭта проблема делаетnot появляются, когда:
The browser is IE7 or IE10 The page is in quirks modeМои вопросы:
Can others confirm this issue or am I crazy? Is this a known issue? Are there any sane solution or work arounds? (A sane solution would be one where the JS in the frame doesn't need to know anything about its parent window)Благодарю.
Пример проблемы: (см. Разницу в IE8 по сравнению с IE9)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>IE8 IFrame Text Range Position Test Page</title>
<style type="text/css">
body {
font-family: Tahoma;
}
#target {
background-color: #CCC;
position: absolute;
left: 50px;
top: 50px;
}
#bullsEye {
position: absolute;
background-color: red;
width: 5px;
height: 5px;
}
iframe {
margin: 10px 75px;
}
</style>
<script type="text/javascript" charset="utf-8">
function target() {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById('target'));
range.select();
var bullsEye = document.createElement('div');
bullsEye.id = 'bullsEye';
bullsEye.style.left = range.offsetLeft + 'px';
bullsEye.style.top = range.offsetTop + 'px';
document.body.appendChild(bullsEye);
document.getElementById('output').innerHTML = 'range.offsetLeft = ' + range.offsetLeft + ', range.offsetTop = ' + range.offsetTop;
}
</script>
</head>
<body>
<div id="target">Target</div>
<input type="button" value="Hit Target" onclick="target();"> <span id="output"></span>
<br><br><br><br><br>
<script>
if (window.parent == window) document.write('<iframe src="?tfr" height="150" width="500"></iframe>');
</script>
</body>
</html>