在iframe中突出显示文本

Question

我正在尝试突出显示iframe内的文本。

在iframe外部，它可以完美运行：

$('p').highlight('text');

为了突出显示iframe中的文本，我使用了以下代码，但是它不起作用：

$( 'iframe' ).contents().find('html').highlight('domain');

https://jsfiddle.net/1tvsj8ho/

在jsfiddle上，您可能会遇到错误（将原点阻塞框架），但对我而言这并不重要，因为我使用的是本地文件。

Answer 1

假设文件位于真实（非file:// ）URL的同一域中，因此您无需担心CORS限制，那么应该可以通过在调用iframe的load事件之前触发它来做到这一点高亮功能：

$(function() { // document ready for parent window
  // highlight in the parent:
  $('p').highlight('text');

  // highlight inside iframe...
  $('iframe').on('load', function() { // ...when it's ready
    $(this).contents().find('p').highlight('text')
  });
});

（不幸的是，由于这些相同的CORS限制，很难在一小段中对此进行演示，但是我已经在自己的本地主机上对其进行了测试，并且只要在父窗口中定义了highlight()函数，它就可以工作。）