0

YUI 3リッチテキストエディターを試していて、理解できないインシデントに遭遇しました。

編集可能領域内に別の原点からif​​rameを挿入すると、このiframeのコンテンツを他のコンテンツと同じように編集できます。カーソルをiframe領域に置いて、たとえば文字を削除することができます。

これはChromeでのみ発生し、Firefoxではiframeを編集できません。YUIテキストエディタのページと同じ起源ではないのに、内部iframeのDOMを操作できるのはどうしてですか？

コーディング例は次のとおりです。

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
    <script>
     YUI().use('editor-base', function(Y) {
       var editor = new Y.EditorBase({content: '<strong>This is <em>a test</em></strong><strong>This is <em>a test</em></strong> '});
       //Add the BiDi plugin
       editor.plug(Y.Plugin.EditorBidi);
       //Focusing the Editor when the frame is ready..
       editor.on('frame:ready', function() {this.focus();});
       //Rendering the Editor.
       editor.render('#editor');
     });
    </script>
    <script>
     function inject() {
       var ifr = $('<iframe/>', {
         style: 'display: block; width: 300px; heigth: 200px;',
         src: 'http://demo.yarkon.de',
         frameBorder: 0, 
         scrolling: 'no'
       });
       $('#editor').find('iframe').contents().find('body').append(ifr);
     }
    </script>
    </head>
  <body>
    <button onclick='inject()'>Inject</button>
    <div id="editor"></div>
  </body>
</html>

Google Chrome 20：iframeは編集可能

Firefox 13：iframeは編集できません

4

1 に答える 1

1

YUIリッチテキストエディタは、編集可能領域のiframeを作成し、ドキュメントのdesignModeをonに設定します。つまり、このiframeとそのすべての子孫は編集可能モードになっています。次に別のiframeを編集可能領域に挿入すると、このプロパティが継承され、元の場所に関係なく編集可能になります。

したがって、YUIテキストエディタが挿入されたiframeのDOMを何らかの形で操作しているという仮定は正しくありません。JavaScriptは含まれていません。これは、他の編集可能なフィールド（textareaやcontenteditable属性を持つ要素など）と同様に、純粋にユーザーの操作です。

于 2012-07-19T08:40:53.533 に答える