我刚刚在 magento 2.x 中实现了 trustpilot 轮播集成。为此,我创建了一个简单的插件,它将所需的数据插入到文档的头部和主体中(使用 laoyout 文件和 .phtml)。这是代码:
xml:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" src_type="url" />
</head>
<body>
<referenceContainer name="content">
<block class="\Magento\Framework\View\Element\Template" name="<vendor>.trustpilot"
template="<vendor>_Trustpilot::trustpilot.phtml"/>
</referenceContainer>
</body>
</page>
phtml:
<!-- TrustBox widget - Carousel -->
<div class="trustpilot-widget" data-locale="en-US" data-template-id="<template-id>" data-businessunit-id="<businessunit-id>" data-style-height="130px" data-style-width="100%" data-theme="light" data-stars="4,5" data-schema-type="Organization">
<a href="<correct-url>" target="_blank">Trustpilot</a>
</div>
<!-- End TrustBox widget -->
此代码是使用 trustpilot 集成工具生成的。它工作得很好,但是当我加载页面时,我在检查器控制台中得到了这个异常:
Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "" from accessing a cross-origin frame
用 chrome 调试后,我发现当 trustpilot 将一些 iframe 加载到我的网页时会发生这种情况。有什么想法是如何发生的,或者我该如何预防?
最佳答案
这是一个 magento 问题。较小的 2.2 版将不包含此修复程序(尚未发布)。插入元素时,magento 将始终尝试通过 contentDocument 访问 iframe。在此提交中找到了对此的官方修复:
https://github.com/magento/magento2/commit/3026e814e236d28d54b5fdb57c7da163ed4c7be4
应用它后,错误消失了。
关于javascript - Trustpilot cross-origin error with carousel integration,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45145485/