0

コピー時にユーザーの選択にテキストを追加する Tynt.com が提供するサービスを複製しようとしています。ユーザーがこれを特に好まないことは理解していますが、ユーザーが Web サイトから何かをコピーするたびに、URL と著作権表示を追加するのはクライアントの要求です。

現在のブラウザーでは、DOM 要素を作成し、選択したテキストを追加し、著作権テキストを追加してから、新しいノードを選択することでこれを行うことができます。

var newSelection = document.createElement( 'div' );
newSelection.style.cssText = "height: 1px; width: 1px; overflow: hidden;";

if( window.getSelection )
{
   var selection = window.getSelection( );
   if( selection.getRangeAt )
   {
      var range = selection.getRangeAt( 0 );

      newSelection.appendChild( range.cloneContents( ) );
      appendCopyright( );

      document.body.appendChild( newSelection );
      selection.selectAllChildren( newSelection );
      // ... remove element, return selection
   }
}

IE9 では、これはselection.selectAllChildren( newSelection )ステートメントでエラーにnewSelectionなり、上記の 2 行目に適用されたスタイルにより、ビューポートから効果的に「隠されている」ことが原因であることがわかりました。

コメントアウトは機能しますが、明らかに新しいノードがエンドユーザーに表示されます。これは後のバージョンの IE で解決されたようですが、サポートが必要なブラウザーである IE9 で十分な回避策を見つけるのに苦労しています。

を設定したり、画面外に配置したり、代替の選択機能を試したりするなど、さまざまな代替手段を試しましたvisibility: hidden;が、それぞれ異なる問題が発生します。

IE によってスローされるエラーは次のとおりです。SCRIPT16389: Unspecified error.

4

2 に答える 2

1

面白い。私は前にそれに出くわしたことがありません。代わりに IE < 11 の他の選択/TextRange API を使用してみましたか? うまくいくかどうかはわかりませんが、試してみる価値はあります：

document.body.appendChild( newSelection );

if (document.body.createTextRange) {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(newSelection);
    textRange.select();
} else {
    selection.selectAllChildren( newSelection );
}
于 2013-11-05T15:30:57.200 に答える
0

CSS を設定しようとしていないことに気付きましたopacity: 0。不思議なことに、IE9 は透過ノードがビューポートから隠されているとは見なしません。

var newSelection = document.createElement( 'div' );
newSelection.style.cssText = "opacity: 0;";

ただし、レイアウトへの影響を避けるために要素も配置すると、同じエラーが発生します。

于 2013-11-05T15:36:44.767 に答える