Access the operating system clipboard from a web application
You may need to use the operating system clipboard directly from the web application page in the browser. Having studied the information a little, it can be found that it is impossible to do this directly from the HTML page using javascript due to the security policy. Specifically, writing to it can be used for bad purposes by hackers. There are several workarounds; you can find many references and examples about them.
Each browser has its own context menu, which has access to the page and can be invoked on top of the page logic, and if necessary copy the selected text of the page element. In Firefox, this is implemented through the standard clipboard helper plugin, so you can interact with it. IE has direct access through window.clipboardData , which is a security violation. In other browsers there is no specific solution.
disadvantages
- for each browser you need to write your own implementation, and not all browsers have such an opportunity.
Use Flash (an old, proven method) that allows you to work with ClipBoard. For this purpose, for example, javascript code ZeroClipBoard (one js and one swf files) was created, used by many as a ready-made solution.
Disadvantages :
- Flash is gradually becoming an unpopular technology and may cease to be a standard due to the arrival of HTML5
- by default it does not allow working with a local site, you need to configure Flash Player for this for each user
- it is necessary to use “crossdomain.xml” to allow cross-domain access
Using Silverlight, which, like Flash, allows you to access ClipBoard through its context.
Disadvantages :
- Silverlight is also not pure HTML, so non-fans of this technology may refuse this solution, but it is gaining its momentum and becoming popular.
')
In this article I will talk about the third option, and we can use Silverlight to access the DOM page and vice versa. For this, from the Silverlight side, we will use a button and a text field.
Why so, you ask? Why button, not Ctrl + C? The fact is that the Silverlight container will only respond to the Ctrl + C keystroke if this key is inside the container (Silverlight is in focus), and we have a key on the page. Secondly, Silverlight has one, but significant limitation when accessing the ClipBoard, this can be done, but only from the Silverlight context and only from the user's filing, i.e. a button or any other event not available from javascript (private) must be pressed, otherwise it would be no different from accessing directly from javascript (only through calling the silverlight method).
The button will write text to the ClipBoard. But how to this event to transmit the specified text. To do this, you first need to get this text. You can call the javascript method, which returns the selected text as a result. From silverlight, you can call the javascript method, and pass it the parameter values ​​via HtmlPage.Window.Invoke, but you cannot directly get the result, so I used a text field in which the called javascript can write the result.
The order of work is as follows:
Create a silverlight-project type application, where there are two objects
App.xaml - initialization
<Your ClipBoard class> .xaml - a class that implements access to ClipBoard
On the page of your class we create two controls - a button that will click to copy to the clipboard and an invisible field. Markup example
And class logic
[ScriptableType] and [ScriptableMember] - mandatory for the class and method if you want to access them from the page
HtmlPage.RegisterScriptableObject (“silverlightClipBoard”, this) - an object is registered under the specified name on the page and can be accessed (see below)
JavascriptFunctionName is the name of the function that is called to write the value to the text field for further copying to the clipboard.
CopyToTextEdit - will be called from the page to record the result in the text field
Copy - button pressing method, at the end it copies to the clipboard
This is all that is needed from the side of silverlight, as a result you get a xap file - a silverlight container that you need to put on the server.
It is necessary:
Silverlight.js file is used for adding - supplied by Microsoft
Silverlight.createObjectEx - creates an object on the page
b.source - relative path to the xap file
b.parentElement - parent DOM element
b.id - by it you can find the object in which the container is located
b.initParams - the initial parameters will be transferred to the class constructor, set in the form 'key1 = value1; key2 = value2', they can be subtracted, I thus pass the name of the function that will work on the javascript side
silverlightClipBoardElement - a global variable for accessing an object
There are other options that you can read about here.
and now the function for working with Silverlight
Look at how you can access the method. For this, for a silverlightClipBoardElement DOM object, we refer to the object registered under the name silverlightClipBoard (see the constructor of the silverlight class) and then to the method by passing the coveted CopyValue.
Silverlight and Javascript interaction
Work with OS clipboard from Silverlight
Overview of options
Individual approach
Each browser has its own context menu, which has access to the page and can be invoked on top of the page logic, and if necessary copy the selected text of the page element. In Firefox, this is implemented through the standard clipboard helper plugin, so you can interact with it. IE has direct access through window.clipboardData , which is a security violation. In other browsers there is no specific solution.
disadvantages
- for each browser you need to write your own implementation, and not all browsers have such an opportunity.
Adobe Flash
Use Flash (an old, proven method) that allows you to work with ClipBoard. For this purpose, for example, javascript code ZeroClipBoard (one js and one swf files) was created, used by many as a ready-made solution.
Disadvantages :
- Flash is gradually becoming an unpopular technology and may cease to be a standard due to the arrival of HTML5
- by default it does not allow working with a local site, you need to configure Flash Player for this for each user
- it is necessary to use “crossdomain.xml” to allow cross-domain access
Microsoft Silverlight
Using Silverlight, which, like Flash, allows you to access ClipBoard through its context.
Disadvantages :
- Silverlight is also not pure HTML, so non-fans of this technology may refuse this solution, but it is gaining its momentum and becoming popular.
')
Implementation via Silverlight
In this article I will talk about the third option, and we can use Silverlight to access the DOM page and vice versa. For this, from the Silverlight side, we will use a button and a text field.
Why so, you ask? Why button, not Ctrl + C? The fact is that the Silverlight container will only respond to the Ctrl + C keystroke if this key is inside the container (Silverlight is in focus), and we have a key on the page. Secondly, Silverlight has one, but significant limitation when accessing the ClipBoard, this can be done, but only from the Silverlight context and only from the user's filing, i.e. a button or any other event not available from javascript (private) must be pressed, otherwise it would be no different from accessing directly from javascript (only through calling the silverlight method).
The button will write text to the ClipBoard. But how to this event to transmit the specified text. To do this, you first need to get this text. You can call the javascript method, which returns the selected text as a result. From silverlight, you can call the javascript method, and pass it the parameter values ​​via HtmlPage.Window.Invoke, but you cannot directly get the result, so I used a text field in which the called javascript can write the result.
The order of work is as follows:
- Button click in Silverlight
- Calling the javascript method from the button method that reads the desired value and copies the text field to the Silverligh
- Return to Javascript Method
- Return to the silverlight button method
- Reading a value from a text field and writing it to the clipboard.
Silverlight side
Create a silverlight-project type application, where there are two objects
App.xaml - initialization
<Your ClipBoard class> .xaml - a class that implements access to ClipBoard
On the page of your class we create two controls - a button that will click to copy to the clipboard and an invisible field. Markup example
< Grid x:Name ="LayoutRoot" Background ="White" >
< Grid.RowDefinitions >
< RowDefinition />
</ Grid.RowDefinitions >
< Button Margin ="0,0,0,0" Click ="Copy" Content ="Copy" Height ="20" Width ="20" />
< TextBlock x:Name ="txtText" Margin ="0" Text ="{Binding Text}" Width ="0" Height ="0" />
</ Grid >
* This source code was highlighted with Source Code Highlighter .And class logic
[ScriptableType]
public partial class ClipBoardBase : UserControl
{
public string JavascriptFunctionName;
public ClipBoardBase()
{
InitializeComponent();
HtmlPage.RegisterScriptableObject( "silverlightClipBoard" , this );
JavascriptFunctionName = "" ;
}
[ScriptableMember]
public void CopyToTextEdit( string text)
{
txtText.Text = text;
}
[ScriptableMember]
private void Copy( object sender, RoutedEventArgs e)
{
HtmlPage.Window.Invoke(JavascriptFunctionName);
Clipboard.SetText(txtText.Text);
}
}
* This source code was highlighted with Source Code Highlighter .[ScriptableType] and [ScriptableMember] - mandatory for the class and method if you want to access them from the page
HtmlPage.RegisterScriptableObject (“silverlightClipBoard”, this) - an object is registered under the specified name on the page and can be accessed (see below)
JavascriptFunctionName is the name of the function that is called to write the value to the text field for further copying to the clipboard.
CopyToTextEdit - will be called from the page to record the result in the text field
Copy - button pressing method, at the end it copies to the clipboard
This is all that is needed from the side of silverlight, as a result you get a xap file - a silverlight container that you need to put on the server.
By javascript
It is necessary:
- prepare and create a Silverlight object on the page
- prepare and create a function that will read the copied value from the page and write it into the silverlight text field
Silverlight.js file is used for adding - supplied by Microsoft
var silverlightdiv = document .createElement( 'div' );
b = new Object();
b.source = ' xap-' ;
b.properties = {};
b.properties.version = '4.0.50303' ;
b.parentElement = silverlightparent;
b.id = 'silverlightClipBoardElement' ;
b.initParams = 'JavascriptFunctionName=silverlightClipBoardCopyToEdit' ;
Silverlight.createObjectEx(b);
silverlightClipBoardElement = document .getElementById( 'silverlightClipBoardElement' );
* This source code was highlighted with Source Code Highlighter .Silverlight.createObjectEx - creates an object on the page
b.source - relative path to the xap file
b.parentElement - parent DOM element
b.id - by it you can find the object in which the container is located
b.initParams - the initial parameters will be transferred to the class constructor, set in the form 'key1 = value1; key2 = value2', they can be subtracted, I thus pass the name of the function that will work on the javascript side
silverlightClipBoardElement - a global variable for accessing an object
There are other options that you can read about here.
and now the function for working with Silverlight
silverlightClipBoardCopyToEdit = function () {
var CopyValue;
// CopyValue
silverlightClipBoardElement.content.silverlightClipBoard.CopyToTextEdit(CopyValue);
};
* This source code was highlighted with Source Code Highlighter .Look at how you can access the method. For this, for a silverlightClipBoardElement DOM object, we refer to the object registered under the name silverlightClipBoard (see the constructor of the silverlight class) and then to the method by passing the coveted CopyValue.
Links
Silverlight and Javascript interaction
Work with OS clipboard from Silverlight
Source: https://habr.com/ru/post/137341/
All Articles