Question

我需要找出iframe中的html文档是否包含一些词wysiwyg（目的：检查它是否是wysiwyg编辑器）。

我尝试过：

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

使用JQuery。

这里的问题是innerHTML是空的。我认为，contentDocument可能包含innerhtml，但事实并非如此。我尝试进行不区分大小写的搜索，其中wysiwyg这个词可以位于任何元素的中间。最初我试图找到一个带有href值的标签或带有src值的img标签，但我发现它太复杂了，这个单词可能会用在html文档的其他部分，我会想念它。我不知道这个词在哪里，它可以在iframe的任何地方 - ＆gt; 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版本不支持。

但是，如果这是您在先前已删除的问题中提出的相同问题，那么这将解决您的实际问题。实际问题似乎是您的（几乎相同的）代码在<iframe>之前执行，您正在寻找由页面上的其他JavaScript插入DOM的代码。当然，您的代码在DOM中尚未找到它。您在该问题中的代码经过验证，可以找到<iframe>所需的ckeditor_new/ckeditor.js，如果DOM存在于DOM曾经是页面脚本完成设置DOM的状态中。在该代码之前，<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>

页面脚本会隐藏<div>并插入包含您感兴趣的<iframe>的{{1}}（大约15kB的插入HTML）。

在其他JavaScript将其插入DOM之前，您需要延迟查找<iframe>的存在。

虽然可能有更好的方法来执行此延迟（例如，观察插入等），但它可能很简单：

setTimeout(findIframeAndDoAllTasksNeedingIt,150);

如果仍未找到，您可以在额外延迟后重试有限次数<iframe>。

Answer 3

您可以使用.contents()和jQuery( ":contains(text)" )以及加载事件来检查iframe是否包含字符串。

为了测试id是否包含字符串，您可以参考attributeContains selector。

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

Answer 4

我认为这可能是解决方案：

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

编辑：bugfix

我尝试过改进，它可以将这个代码用于几乎所有WYSIWYG编辑器，除了TINYMCE，这是一种奇怪的行为。发现一些帧的id不同于包含＆＃34; mce＆＃34;的帧。也许我们稍后会找到解决方案。

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

我喜欢这段代码（我在我的程序中使用它，它为所见即所得的编辑添加了css样式 - 非常实用）。

如何使用Javascript在html文档中找到单词wysiwyg？

4 个答案: