How do i create the range object for the selected content in html

Hi Experts, I need a help

I want to change the content of html file loaded in an "object" element. In internet explorer it works fine but i am not able to do it in Firefox 2. I cant able to create the range object. Here my html page e:g

<html>
<body>
<div id="divFile">
<object id="file" type="text/html" data="abc.html"></object>
</div>
</body>
</html>
Here the java script code 
 
var userSelection;
var del;
if (window.getSelection) {       // for fire fox
userSelection=document.getElementById("file").contentDocument.getSelection();
del="<span class=msoDel>"+userSelection.toString()+"</span>";
userSelection.getRangeAt(0).execCommand("inserthtml",false,del);	
}
else if (document.selection) {              // for ie,  Opera!
userSelection = document.getElementById("file").selection.createRange();
}

Open in new window

LVL 2
jbmrajaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Pravin AsarPrincipal Systems EngineerCommented:
Test the following code with FF ?


<html>
<head>
<title>Pravin Asar</title>
<script type="text/javascript">
var selection1, selection2;

function storeCurrentSelection () {
  if (window.getSelection) {
    var selection = window.getSelection();
    if (selection.rangeCount > 0) {
      var selectedRange = selection.getRangeAt(0);
      return selectedRange.cloneRange();
    }
    else {
      return null;
    }
  }
  else if (document.selection) {
    var selection = document.selection;
    if (selection.type.toLowerCase() == 'text') {
      return selection.createRange().getBookmark();
    }
    else {
      return null;
    }
  }
  else {
    return null;
  }
}

function restoreSelection (storedSelection) {
  if (storedSelection) {
    if (window.getSelection) {
      var selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(storedSelection);
    }
    else if (document.selection && document.body.createTextRange) {
      var range = document.body.createTextRange();
      range.moveToBookmark(storedSelection);
      range.select();
    }
  }
}
</script>
</head>
<body>
<h1>Storing and restoring text selection in Mozilla and in MSIE/Win</h1>
<p>You can select text in this page and then store the selection:
<input type="button" value="store current selection"
       onclick="window.selection1 = storeCurrentSelection();">
</p>
<p>And here you can store a second selection:
<input type="button" value="store current selection"
       onclick="window.selection2 = storeCurrentSelection();">
</p>
<p>Here you can restore the save selection:
<input type="button" value="restore first selection"
       onclick="restoreSelection(selection1);">
<input type="button" value="restore second selection"
       onclick="restoreSelection(selection2);">
</p>
</body>
</html>
0
jbmrajaAuthor Commented:
Your script is working fine. You are getting the selection and range object from the window.getSelection(). Please note down I am selecting the content from different file loaded in a div using object element. Iwould like to get the range object and execute the execCommand for the selected content available within the  "object" element. Please see my script and the html page.

when I use the following code I can retrieve the selection object. After that when I get the range object by using the method userSelection.getRangeAt(0) it returns undifined. Following is the code,

userSelection = document.getElementById("file").contentDocument.getSelection();
userSelection.getRangeAt(0).execCommand("inserthtml",false,<del>+userSelection.toString()+</del>);      

Can you suggest me how do I achieve my goal?
0
Pravin AsarPrincipal Systems EngineerCommented:
To change to content of the object.

look at




You can get the

document.getElementById("file").contentDocument


Try the attached code,



<html>
<head>
<title>Pravin Asar</title>
<script type="text/javascript">
var selection1, selection2;
function showDiv (oId) {
        var myObj =  document.getElementById(oId).contentDocument;
	alert (myObj.body.innerHTML);
}
function updateDiv (oId) {
       var myObj =  document.getElementById(oId).contentDocument;
       myObj.body.innerHTML = '<h1>UPDATING</h1>';
}
function storeCurrentSelection () {
  if (window.getSelection) {
 
    var selection = window.getSelection();
    if (selection.rangeCount > 0) {
      var selectedRange = selection.getRangeAt(0);
      return selectedRange.cloneRange();
    }
    else {
      return null;
    }
  }
  else if (document.selection) {
    var selection = document.selection;
    if (selection.type.toLowerCase() == 'text') {
      return selection.createRange().getBookmark();
    }
    else {
      return null;
    }
  }
  else {
    return null;
  }
}
 
function restoreSelection (storedSelection) {
  if (storedSelection) {
    if (window.getSelection) {
      var selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(storedSelection);
    }
    else if (document.selection && document.body.createTextRange) {
      var range = document.body.createTextRange();
      range.moveToBookmark(storedSelection);
      range.select();
    }
  }
}
</script>
</head>
<body>
<input type="button" value="Show file contents" onclick="showDiv('file');">
<input type="button" value="Update file contents" onclick="updateDiv('file');">
 
<!--div id="divFile1">
<iframe src="embed.htm"></iframe>
</div-->
 
<div id="divFile2">
<object id="file" type="text/html" data="embed.htm"></object>
</div>
 
<h1 id="file1">Storing and restoring text selection in Mozilla and in MSIE/Win</h1>
<p>You can select text in this page and then store the selection:
<input type="button" value="store current selection"
       onclick="window.selection1 = storeCurrentSelection();">
</p>
<p>And here you can store a second selection:
<input type="button" value="store current selection"
       onclick="window.selection2 = storeCurrentSelection();">
</p>
<p>Here you can restore the save selection:
<input type="button" value="restore first selection"
       onclick="restoreSelection(selection1);">
<input type="button" value="restore second selection"
       onclick="restoreSelection(selection2);">
</p>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jbmrajaAuthor Commented:
i have loaded the file in div instead of object and use the getElementById() function to create the range

my html is

        <div id="divFile"> </div>
window.getElementById("divFile").getSelection().getRangeAt(0)

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.