Webアプリケーションからオペレーティングシステムのクリップボードにアクセスする

ブラウザのWebアプリケーションページからオペレーティングシステムのクリップボードを直接使用する必要がある場合があります。 情報を少し調べてみると、セキュリティポリシーのため、JavaScriptツールを使用してHTMLページから直接これを行うことは不可能であることがわかります。具体的には、情報への書き込みは攻撃者による悪意のある目的で使用できます。 いくつかの回避策があります;それらに関する多くのリンクと例が見つかります。



オプションの概要



個別のアプローチ


各ブラウザには独自のコンテキストメニューがあり、ページにアクセスし、ページロジックの上部で呼び出すことができます。また、ページ要素の選択したテキストをコピーする場合に呼び出すことができます。 Firefoxでは、これは標準のクリップボードヘルパープラグインを介して実装されるため、ユーザーはそれと対話できます。 IEはwindow.clipboardDataを介して直接アクセスできますが、これはセキュリティ違反です。 他のブラウザでは、特定の解決策はありません。

欠点

-ブラウザごとに独自の実装を記述する必要がありますが、一般的にすべてのブラウザにこのような機会があるわけではありません。



Adobe Flash


Flash(古い実績のある方法)を使用すると、ClipBoardで作業できます。 このために、たとえば、JavaScriptコードZeroClipBoard (jsファイル1つとswfファイル1つ)が作成され、多くの人が既製のソリューションとして使用しました。

欠点

-Flashは徐々に人気のない技術になりつつあり、HTML5の登場により標準ではなくなっている可能性があります

-デフォルトでは、ローカルサイトでの作業は許可されていません。ユーザーごとにFlash Playerを構成する必要があります

-クロスドメインアクセスを許可するには、「crossdomain.xml」を使用する必要があります



マイクロソフトシルバーライト


Flashのように、Silverlightを使用して、コンテキストからClipBoardにアクセスできます。

欠点

-Silverlightも純粋なHTMLではないため、この技術を愛する人はこのソリューションを拒否するかもしれませんが、勢いを増して人気を博しています。



Silverlightによる実装



この記事では、3番目のオプションについて説明します。Silverlightを使用してDOMページにアクセスしたり、その逆も可能です。 これを行うには、Silverlight側で、ボタンとテキストフィールドを使用します。

なぜそうですか、あなたは尋ねますか? Ctrl + Cではなくボタンが必要な理由 実際、Silverlightコンテナーは、このキーストロークがコンテナー内にある(Silverlightがフォーカスされている)場合にのみキーストロークCtrl + Cに応答し、ページにキーストロークがあります。 2番目に、Silverlightには1つありますが、ClipBoardにアクセスする際にかなりの制限があります。Silverlightコンテキストからのみ、ユーザーの入力からのみ、これを行うことができます。 ボタンを押すか、javascript(プライベート)からアクセスできない他のイベントを実行する必要があります。それ以外の場合は、javascriptから直接アクセスする場合と同じです(silverlightメソッドを呼び出す場合のみ)。

ボタンは、ClipBoardにテキストを書き込みます。 しかし、与えられたテキストをこのイベントに伝える方法。 これを行うには、まずこのテキストを取得する必要があります。 javascriptメソッドを呼び出すと、選択したテキストが結果として返されます。 silverlightからjavascriptメソッドを呼び出し、HtmlPage.Window.Invokeを介してパラメーター値を渡すことができますが、直接結果を取得することはできないため、呼び出されたjavascriptが結果を書き込むことができるテキストフィールドを使用しました。



手順は次のとおりです。

  1. Silverlightのボタンクリック
  2. ボタンメソッドからjavascriptメソッドを呼び出します。このメソッドは、目的の値を読み取り、テキストフィールドをSilverlighにコピーします。
  3. Javascriptメソッドに戻る
  4. Silverlightボタンメソッドに戻る
  5. テキストフィールドから値を読み取り、クリップボードに書き込みます。


Silverlight側




タイプアプリケーションのsilverlightプロジェクトを作成します。2つのオブジェクトがあります

App.xaml-初期化

<Your ClipBoard class> .xaml-ClipBoardへのアクセスを実装するクラス



クラスのページに、クリップボードにコピーするためにクリックするボタンと非表示フィールドの2つのコントロールを作成します。 レイアウト例

< 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 .






そして、クラスのロジック

[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]および[ScriptableMember] -ページからアクセスする場合は、クラスとメソッドに必要です

HtmlPage.RegisterScriptableObject( "silverlightClipBoard"、これ) -オブジェクトはページ上の指定された名前で登録され、アクセスできます(以下を参照)

JavascriptFunctionName-クリップボードにさらにコピーするために、テキストフィールドに値を書き込むために呼び出される関数の名前。

CopyToTextEdit-結果をテキストフィールドに書き込むためにページから呼び出されます

コピー -ボタンをクリックする方法、最後にクリップボードにコピーする方法



これは、silverlightが必要とするすべてです。その結果、xapファイルを取得します。これは、サーバーに配置する必要のあるsilverlightコンテナーです。



Javascript側


必要です:





Silverlight.jsファイルは追加に使用されます-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-ページ上にオブジェクトを作成します

b.source -xapファイルへの相対パス

b.parentElement-親DOM要素

b.id-コンテナが配置されているオブジェクトを見つけることができます

b.initParams-初期パラメーターは、クラスのコンストラクターに渡され、「key1 = value1; key2 = value2」の形式で設定され、減算することができます。この方法で、javascript側で機能する関数の名前を渡します。

silverlightClipBoardElement-オブジェクトにアクセスするためのグローバル変数

ここで読むことができる他のパラメータがあります。

そして今、Silverlightで動作するための関数自体

silverlightClipBoardCopyToEdit = function () {

var CopyValue;

// CopyValue

silverlightClipBoardElement.content.silverlightClipBoard.CopyToTextEdit(CopyValue);

};




* This source code was highlighted with Source Code Highlighter .






メソッドへのアクセス方法を確認します。このために、silverlightClipBoardElement DOMオブジェクトを使用して、silverlightClipBoardという名前で登録されたオブジェクト(silverlightクラスのコンストラクターを参照)にアクセスし、その後、大切なCopyValueを渡します。



参照資料



SilverlightとJavascriptの相互作用

SilverlightのOSクリップボードを操作する



All Articles