|
Rank: Advanced Member Groups: Member
Joined: 1/2/2017 Posts: 32
|
Please help,
We have the EO Web Browser control, and are trying to make JavaScript select a table and copy its text to the clipboard. Under normal circumstances, we would use the HTML/JavaScript sample below to do this, bu with the EO Web Browser control the sample below is not throwing any error, nor is it working. Please advise how we can do this.
<!DOCTYPE HTML> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> <title>Test</title> <script src='./scripts/jquery-1.11.4.js'></script> </head> <body style='padding: 0 0 0 0; margin: 0 0 0 0; width: 100%; height: 1000px;'> <div id="divTgt"> <table id="tblTgt"> <tr><td>A</td></tr> <tr><td>B</td></tr> <tr><td>C</td></tr> <tr><td>D</td></tr> <tr><td>E</td></tr> </table> </div> <script language="javascript"> window.onload = function() { try { var objRange = document.createRange(); var objSelection = window.getSelection(); objSelection.removeAllRanges(); var objTgt = document.getElementById("divTgt");
try { objRange.selectNodeContents(objTgt); } catch (eCapture) { objRange.selectNode(objTgt); }
objSelection.addRange(objRange); document.execCommand("Copy"); alert("The table should now be copied..."); } catch (e) { alert("Error: " + e); } } </script> </body> </html>
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,229
|
|
|
Rank: Advanced Member Groups: Member
Joined: 1/2/2017 Posts: 32
|
Thanks for the reply, but sadly, the AllowJavaScriptAccessClipboard did not make a difference. That said, if I get a single <tr> element, and pass that to the script, instead of the <div> as [ var objTgt = document.getElementById("trTgt"); ] where I add <tr id="trTgt"> to a row, the clipboard functionality works. But when I try to pass the <div> or the <table> nothing is copied, and no error results.
|
|
Rank: Advanced Member Groups: Member
Joined: 1/2/2017 Posts: 32
|
I found the issue. The EO Web Browser (EOB) control out of the box, allows JavaScript to copy to the clipboard just fine, so the AllowJavaScriptAccessClipboard is not necessary, but good to know. The issue is that the EOB will not "see" anything if the target element (which in this case is a table) is dynamically made. If the tgt is already made, and JavaScript can refresh, then the EOB will copy text as expected.
But if the EOB in one single JavaScript thread, dynamically creates/changes the target (like add rows to the table), and stays in that same thread, and then executes the clipboard and selection JavaScript, then the EOB will not see the changes, and thus, no error, but nothing copied.
My solution was to use window.setTimeout after dynamically changing the target, before issuing the selection and clipboard JavaScript.
|
|
Rank: Advanced Member Groups: Member
Joined: 1/2/2017 Posts: 32
|
I have more information on this. After several attempts, I found that the window.setTimeout is not the entire answer. Another problem is that the target must be visible, with at least 1 pixel by 1 pixel in width/height. I literally wrapped the <table> inside a <div> and set the <div> as this:
<div id="divTgt" style='width: 1px; height: 0px; overflow: hidden;'>
The "height 0px;" causes EOB to copy nothing. If I make the height 1px, EOB works.
To me, I rate this as a BUG.
The target for selection does not have to have height/width, for this to work in IE's browser, and no W3C notation I am aware of says that the outer parents of a selection target must have height for the selection logic to work to the clipboard function.
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,229
|
Hi,
Your observation is correct. We have traced into Chromium's source code and confirmed that Chromium would treat a selection with no visible contents as a "caret selection" instead of a "range selection". You can think of a caret selection as a zero length range since the begining of the range and the end of the range is exactly at the same position (since nothing is visible in between). When this is the case, copy will not proceed.
We are not in a position to change Chromium's behavior because our product must be consistent with Chrome (otherwise tomorrow someone would be asking us why Chrome works this way and your product works that way). Further more, even though this was a bug, we are generally not in a position to fix such bugs either. Chromium is a huge products with millions of line of code and hundreds of commits every day. So it is not practical for us to fix issues on Chromium. Rather we would usually wait for it to be fixed in Chromium first.
In the future please try to verify if Chrome browser demonstrates the same behavior as EO.WebBrowser. As a general rule, we will only investigate issues where EO.WebBrowser behaves differently than Google Chrome browser. If they behave the same, then it's very unlikely that we will change EO.WebBrowser's behavor to deviate from Chrome's behavior.
Thanks!
|
|