Question

我已经建立了一个使用选项卡进行导航的.html文档。也有用于在主要部分内导航的子选项卡。这是通过iframe和jQuery .show（）/ .hide（）功能实现的，本质上是隐藏和显示元素。

问题是我在iframe中有多个大型PDF文档，而Chrome的Ctrl + F查找/搜索功能会搜索每个加载的iframe，而不仅仅是可见的iframe。 Chrome内置的PDF查看器不允许您据我所知仅搜索该文档。

我尝试过/考虑过的一些事情：

使用Java脚本的自定义搜索功能：iframe中的PDF来自不同的域，因此无法访问其内容。
仅搜索某些元素：排除元素的唯一方法是使它们成为CSS内容/使其成为图像/使其成为SVG，这无济于事，因为我再次无法访问iframe的内容。
PDF.js或类似的插件解决方案：据我所知，这也与Chrome中的CORS有关。
删除或更改隐藏元素的src =元素：我无法可靠地找到一种方法来检查页面上可见的内容和不可见的内容。

<div id="pdf1" class="tab active">
<iframe class="frame" frameborder="0" style="display:block;" src="pdf1.pdf"></iframe>
</div>
<div id="pdf2" class="tab">
<iframe class="frame" frameborder="0" style="display:none;" src="pdf2.pdf"></iframe>
</div>

我什至不确定我想要实现的目标是否一开始就可以实现。

我的总体问题是，我可以将Chrome的Ctrl + F查找功能限制在某些元素（在这种情况下，是可见的iframe）吗？

编辑：从<iframe>切换到<embed>修复了此问题-PDF现在对加载的响应较慢，但是值得搜索。

Answer 1

将iframe样式更改为visibility:hidden会导致在其中找到文本。但是，如果您使用display: none，则Chrome的“查找”将不会在其中显示：

<iframe srcdoc="<p>Some visible iframe</p>"></iframe>
<iframe srcdoc="<p>Some invisible iframe</p>" style="display: none"></iframe>

因此，如果您将所有iframe放置在静态容器中（即使iframe更改为display: none，该页面布局也不会更改），然后在不显示视图时（或在控件-按F键），Chrome浏览器的“查找”将不会在其中查找文本。

（Related issue）

您可以从Chrome查找功能中排除隐藏的DOM元素吗？

1 个答案: