Welcome Guest Search | Active Topics | Sign In | Register

HOWTO Copy table text to the clipboard with EO Web Browser control and JavaScript. Options
JSB
Posted: Tuesday, February 7, 2017 2:57:49 PM
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>
eo_support
Posted: Tuesday, February 7, 2017 4:58:28 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,229
Hi,

Please try to set this property to true and see if it works:

https://www.essentialobjects.com/doc/eo.webengine.browseroptions.allowjavascriptaccessclipboard.aspx

See here for more information on how to set browser options:

https://www.essentialobjects.com/doc/webbrowser/advanced/browser_options.aspx

Thanks!
JSB
Posted: Tuesday, February 7, 2017 5:09:50 PM
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.
JSB
Posted: Tuesday, February 7, 2017 5:34:21 PM
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.
JSB
Posted: Tuesday, February 7, 2017 6:36:21 PM
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.
eo_support
Posted: Wednesday, February 8, 2017 9:07:04 AM
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!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.