How to find word wysiwyg in html document using Javascript?

javascript jquery html

71 просмотра

4 ответа

I need to find out if html document inside iframe contains some occurance of word wysiwyg (purpose: to check if it is wysiwyg editor).

What I have tried:

  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;
    });

using JQuery.

The problem here is that innerHTML is empty. I thought, contentDocument could contain innerhtml, but this is not the case. I try to do case insensitive search, where the word wysiwyg can be in the middle of any element. Originally I tried to find a tag with href value or img tag with src value but I found that is too much complicated and the word could be used in other parts of the html document and I would miss it. I don't know where the word could be, it can be anywhere in the iframe -> html document.

Your suggestion?

Note: Permissions here are not problem, they are granted by Firefox webextentions API - which is not subject of the question.

Автор: user1141649 Источник Размещён: 08.11.2019 11:30

Ответы (4)


0 плюса

If permissions are not the problem, you should be able to access the iframe HTML by doing the following:

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

jQuery .contents()

Автор: Donnie D'Amato Размещён: 20.08.2016 04:03

0 плюса

You may use .contents() and jQuery( ":contains(text)" ) plus the load event to check if the iframe contains the string.

In order to test if the id contains the string you may refer to attributeContains selector.

    $(function () {
        $('iframe[id*="wysiwyg"]').on('load', function (e) {
            var iframes = $(this).contents().find(':contains("wysiwyg")');
        });
    });
Автор: gaetanoM Размещён: 20.08.2016 04:35

0 плюса

As guest271314 has mentioned, you are not currently using .contentDocument in your code.

You could change your code as follows:

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;
});

From MDN's <iframe> page:

From the DOM iframe element, scripts can get access to the window object of the included HTML page via the contentWindow property. The contentDocument property refers to the document element inside the iframe (this is equivalent to contentWindow.document), but is not supported by Internet Explorer versions before IE8.


However, if this is the same issue you were asking about in a prior, now deleted, question, this will, not solve your actual problem. The actual problem appeared to be that your (nearly identical) code was executing prior to the <iframe> you are looking for being inserted into the DOM by other JavaScript on the page. Your code, of course, can not find it when it is not, yet, in the DOM. Your code in that question was verified to find the <iframe> desired if it existed in the DOM in the state that the DOM was once the page scripts finished setting up the DOM. Prior to that code, ckeditor_new/ckeditor.js, executing, what exists on the page is:

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

The page script hides that <textarea> and inserts a <div> containing the <iframe> in which you are interested (about 15kB of inserted HTML).

You will need to delay looking for the existence of that <iframe> until after that other JavaScript inserts it into the DOM.

While there may be better ways to perform this delay (e.g. watching for the insert, etc.), it could be something as simple as:

setTimeout(findIframeAndDoAllTasksNeedingIt,150);

If still not found, you could retry looking for the <iframe> a limited number of times after additional delays.

Автор: Makyen Размещён: 20.08.2016 04:03

0 плюса

I thought this could be solution:

  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;
    });

edit: bugfix

I tried improvement which enables to use this code for almost all WYSIWYG editors, except TINYMCE which is kind of strange behaviour. There are found some frames with different id than that one containing "mce". Maybe we will find solution later.

 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;
    });

I love this code (I use it in my program which adds css styles to WYSIWYG editors - quite usable).

Автор: user1141649 Размещён: 20.08.2016 04:57
Вопросы из категории :
32x32