javascript - iframe和selection结合使用，为什么焦点会失去？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
<script src="tool/jquery-1.7.2.js"></script>
</head>
<body>
<p class="editor">
<textarea name="editContent" id="content" cols="32" rows="10"></textarea>
<input type="button" class="addWords" value="插入内容"/>
</p>
<p class="show">
<iframe src="model.html" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="100%" height="450px" id="show_h5" name="show_h5" onLoad="iFrameHeight()" ></iframe>
<p id="edit" class="edit" contenteditable="true" style="width: 500px;height: 500px;border: solid 1px red;"></p>
</p>
<p class="right">
</p>
</body>
</html>
<script type="text/javascript">
var testContent = /.+/g;
$(".addWords").click(function(){
var content = $("#content").get(0).value;
var array = content.match(testContent);
var selection = window.getSelection();
$.each(array,function(index,value){
insertAtCursor(selection,value);
});
});
function insertAtCursor(myField, myValue) {
if(myField.anchorNode == null){
alert("请选择要插入内容的位置！");
return;
}
if(myValue != null && myValue != ""){
var startPos = myField.anchorOffset;
var endPos = myField.focusOffset;
var word = myField.anchorNode.data;
myField.anchorNode.data = word.substring(0, startPos) + myValue + word.substring(endPos, word.length);
}else{
alert("请输入要添加的内容！");
return;
}
}
</script>
model.html中只有一个p
<p class="content" id="content" contenteditable="true" style="width: 500px;height: 300px;border: solid 1px red"></p>
问题：在本页的p可以实现在鼠标处插入文字，但是通过iframe引入的p，当点击“插入内容”按钮时，原本在p中的焦点就失去了。请教如何解决这个问题。
