将事件处理程序附加到在IFrame中呈现的HTML

Posted 2023-01-23

我正在设计一个React应用程序，该应用程序将用于从已知来源查看许多不同类型的文件。用户将进行搜索，并显示结果列表，然后单击结果之一，即可获取文件，并希望将其显示在屏幕上。这些文件都是html / XML。

此外，我想将事件处理程序附加到文件本身内的某些标签上。 （例如，将onClick侦听器附加到所有<p>标签）

显而易见的答案是使用iframe，但是随后事件处理程序成为问题。使用dangerouslySetInnerHTML也可以，但是，如果有更好的解决方案，我很想知道。有任何想法吗？

答案

您可以从iframe触发事件并通过其父代码使用此代码处理事件

//iframe
function buttonClick() 
  parent.$(parent.document).trigger('eventhandler');

<button onclick="buttonClick()">Button</button>

//parent
 $(document).on('eventhandler', function () 
     alert('event fired');
 );

只需在父文件中添加事件处理程序，并在其中添加逻辑，然后在子iframe文件中添加事件触发器，否则您也可以按照this link。