我有一个从批量调整照片大小中获得的图像调整大小工具。我需要将其添加到名为“参与者中心”的 CMS 功能中。
由于某种原因，代码本身无法在参与者中心运行(它显示为空白)，但它可以在参与者中心之外的 HTML 页面中运行。所以我想也许 iframe 会起作用。
现在 iframe 的框架显示，但内容不显示。
HTML:
<div id="BulkResizePhotosEmbed"></div>
<script type="text/javascript" src="https://bulkresizephotos.com/js/integration.js">
</script>
<script>
bulkresizephotos.load({ "resize_type": "exact", "resize_value": "300", "secondary_resize_value": "400", "quality_level": "0.5", "extension": "jpg", "preserve_aspect_ratio": true, "transparent_background": true, "background_color": "ffffff" });
</script>
我将上述代码放在一个单独的 html 文档中，该文档与参与者中心托管在同一服务器上。
HTML:
<iframe src="http://www.supportcbcf.com/site/PageNavigator/reus_image_resize.html"></iframe>
我还尝试将上述链接设为安全链接 (https)，但它仍然无法加载。我在 js fiddle 中尝试过，但它在那里也不起作用。现在我不认为参与者中心正在阻止任何 JavaScript 代码，因为它有一个温度计和动态更新的筹款资金。我查看了控制台日志，没有收到任何错误。
任何帮助将不胜感激!
谢谢
最佳答案
为了让自己的网站更安全，并避免显示在另一个网站内(这可能会降低用户体验，甚至让用户认为内容来自另一个网站)，其中一些具有内容安全策略，定义允许的框架祖先。
这允许他们通知浏览器他们只想嵌入某些网站。
如果您打开浏览器控制台，您将看到以下错误:
Refused to display 'https://...' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.facebook.com *.salesforce.com *.convio.net *.google.com *.force.com facebook.com salesforce.com convio.net google.com force.com".
如果您网站的域名与规则不匹配，您的浏览器将阻止该页面。
以下示例说明了此功能的优点:
想象一下 evilwebsite.com 想要更多 Facebook 点赞。他们只需在网站上嵌入 Facebook 页面的 iframe，将其设置为 opacity: 0，然后将其放置在内容前面，并在不可见的“Like”按钮后面放置一个按钮。点击它的人实际上会点击“喜欢”按钮。免费点赞!这就是您无法在网站上嵌入常规 Facebook 页面的原因。
关于javascript - 页面无法通过 iframe 加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49804998/