Javascriptを使用してhtml文書内の単語wysiwygを見つける方法は？

Question

iframe内のhtmlドキュメントにwysiwygという単語が含まれているかどうかを調べる必要があります（目的：wysiwygエディタかどうかを確認する）。

jQueryのを使用して

iframes = $('iframe').filter(
    function() { 
     var result = this.id.match(/wysiwyg/i); 
     if (!result) 
     result = this.className.match(/wysiwyg/i); 
     if (!result) 
     { 
     var success = this.innerHTML.match(/wysiwyg/i); 
     if (success && success.length) 
      return this; 
     } 
    return result; 
    }); 

を：私が試してみました何

。

ここでの問題は、innerHTMLが空であることです。私はcontentDocumentがinnerhtmlを含むことができると思ったが、そうではない。私は大文字と小文字を区別しない検索をしようとします。単語wysiwygはどの要素の真ん中にあってもかまいません。もともとhref値のタグ、またはsrc値のimgタグを見つけようとしましたが、それはあまりにも複雑で、HTML文書の他の部分でこの単語が使用される可能性があることがわかりました。私は単語がどこにあるのか分からず、iframe - > htmlドキュメントのどこにでも置くことができます。

あなたの提案はありますか？

注： 権限はここには問題ありませんが、Firefox webextentions APIによって許可されています。これは質問の対象ではありません。

Answer 1

権限が問題でない場合は、次の操作を行って、IFRAMEのHTMLにアクセスできるようにする必要があります

$('#specificIframe').contents().find('#thingToFind'); 

jQuery .contents()

Answer 2

guest271314が述べたように、あなたは現在、あなたの中に.contentDocumentを使用していませんコード。次のようにあなたのコードを変更することができ

：

iframes = $('iframe').filter(function() { 
    var result = this.id.match(/wysiwyg/i); 
    if (!result){ 
     result = this.className.match(/wysiwyg/i); 
    } 
    if (!result) { 
     var success = this.contentDocument.querySelector('html').innerHTML.match(/wysiwyg/i); 
     if (success && success.length){ 
      return this; 
     } 
    } 
    return result; 
}); 

MDN's <iframe> pageから：

DOM iframe要素から、スクリプトがcontentWindow経由インクルードHTMLページのwindowオブジェクトへのアクセスを得ることができますプロパティ。 contentDocumentプロパティはiframe（これはcontentWindow.documentに相当）内のドキュメント要素を参照していますが、IE8より前のInternet Explorerではサポートされていません。

---

これはあなたが前に、今、削除、質問にについて尋ねたのと同じ問題がある場合は、これは、あなたの実際の問題を解決することはできません。実際の問題は、ページ上の他のJavaScriptによってDOMに挿入されることを探しているの前に、（ほとんど同じ）コードが実行されているように見えました。あなたのコードはもちろん、それがDOMにないときにはそれを見つけることができません。その質問のあなたのコードは、ページスクリプトがDOMの設定を完了した後にDOMが存在していた状態で、DOM内に存在していた場合にはが望ましいと判断されました。ページ上に存在するものをそのコード、ckeditor_new/ckeditor.js、実行、以前は次のとおりです。

<script src="ckeditor_new/ckeditor.js"></script> 
<textarea id="FCKeditor1" name="FCKeditor1" rows="8" cols="60"></textarea> 
<script>CKEDITOR.replace('FCKeditor1', {customConfig: '/ckeditor_new/config.js'});</script> 

ページのスクリプトは、その<textarea>を隠し、（挿入されたHTMLの15KB程度）あなたが関心のあるを含む<div>を挿入します。

他のJavaScriptがそれをDOMに挿入するまで、そのの存在を探すのを遅らせる必要があります。

（などなど、挿入のために見て、）この遅延を実行するためのより良い方法があるかもしれませんが、それはのような単純なものが考えられます。それでも見つからない場合は

setTimeout(findIframeAndDoAllTasksNeedingIt,150); 

、あなたが探している再試行可能性があり追加の遅延の後に限定された回数だけ。

Answer 3

.contents()とjQuery(":contains(text)")にloadイベントを加えてiframeに文字列が含まれているかどうかを確認することができます。

idに文字列が含まれているかどうかをテストするには、attributeContains selectorを参照してください。私は一種の奇妙でTinyMCEを除いて、ほぼすべてのWYSIWYGエディタのために、このコードを使用することを可能にする改良を試みたバグ修正

：

iframes = $('iframe').filter(
    function() { 
     var result = this.id.match(/wysiwyg/i); 
     if (!result) 
     result = this.className.match(/wysiwyg/i); 
     if (!result) 
     { 
     if (!this.contentDocument) 
      return null; 
     var success = this.contentDocument.head.innerHTML.match(/wysiwyg|editor|editable/i); 
     if (success && success.length) 
      return this; 
     success = this.contentDocument.body.innerHTML.match(/wysiwyg|editor|editable/i); 
     if (success && success.length) 
      return this; 
     } 
    return result; 
    }); 

編集：

$(function() { 
     $('iframe[id*="wysiwyg"]').on('load', function (e) { 
      var iframes = $(this).contents().find(':contains("wysiwyg")'); 
     }); 
    }); 

Answer 4

私はこれが解決策になると考えていました動作。 "mce"を含むフレームとは異なるIDを持つフレームがいくつか見つかりました。たぶん後で解決策を見つけるでしょう。

iframes = $('iframe').filter(
    function() { 
     var result = this.id.match(/wysiwyg/i); 
     if (!result) 
     result = this.className.match(/editable|wysiwyg|editor/i); 
     if (!result) 
     result = this.id.match(/mce/i); 
     if (!result) 
     { 
     if (!this.contentDocument) 
      return null; 
     var success = this.contentDocument.head.innerHTML.match(/editable|wysiwyg|editor|tinymce/i); 
     if (success && success.length) 
      return this; 
     success = this.contentDocument.body.innerHTML.match(/editable|wysiwyg|editor|tinymce/i); 
     if (success && success.length) 
      return this; 
     } 
    return result; 
    }); 

私は（ - かなり使える私はWYSIWYGエディタにCSSスタイルを追加して私のプログラムでそれを使用）、このコードが大好きです。