jquery 使用iframe嵌套的页面，想要实现打开新页面预览pdf功能

跳转后显示“此页面已被 Chrome 屏蔽”怎么实现该功能，求解

pdf文件为线上获取，非本地文件

【以下回答由 GPT 生成】

问题解答:

首先，要解决这个问题，我们需要明白为什么Chrome会屏蔽跳转后的页面。这是因为现代浏览器对于跨域访问的安全性有限制，当你在iframe中加载一个来自不同域的页面时，浏览器会尝试阻止你的操作，以防止可能的安全风险。

为了解决这个问题，我们可以使用一个间接的方法来实现打开新页面预览pdf的功能。具体步骤如下:

1. 在父页面中创建一个a标签，用于打开新的页面。给这个a标签一个唯一的id，方便后面操作。

html <a href="" target="_blank" id="pdfLink">打开预览页面</a>

1. 在父页面的javascript代码中，使用jQuery来给这个a标签添加点击事件。

```javascript $('#pdfLink').click(function(e) { e.preventDefault(); // 阻止a标签默认的跳转行为

 // 生成一个包含pdf链接的URL
 var pdfUrl = 'http://example.com/pdf-file.pdf';

 // 更新a标签的href属性
 $(this).attr('href', pdfUrl);

 // 模拟点击事件打开预览页面
 window.open(pdfUrl, '_blank');

}); ```

在这段代码中，我们使用了preventDefault方法来阻止a标签默认的跳转行为。然后，我们生成一个包含pdf链接的URL，并将它更新到a标签的href属性上。最后，使用window.open方法来模拟点击预览页面的操作。

1. 在新的预览页面中，通过正常的方式来加载pdf文件。

html <embed src="http://example.com/pdf-file.pdf" width="100%" height="100%"/>

在这个示例中，我们使用embed标签来加载pdf文件。你可以根据实际需求使用其他的标签或库来实现加载pdf的功能。

这样，当用户在iframe中点击打开新页面的链接时，浏览器会打开一个新的页面，并加载pdf文件。

请注意，这种方法只能在你有权限访问pdf文件的情况下才有效。如果pdf文件来自不同的域，你可能需要通过服务器代理或跨域请求来获取pdf文件。

希望这个解决方案能够帮助到你！如果你还有任何问题，请随时向我提问。

【相关推荐】

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/352294
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：使用iframe预览pdf；