javascript - Trustpilot cross-origin error with carousel integration

标签 javascript php html magento2 trustpilot

我刚刚在 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/

相关文章:

javascript - 如何在 Google 在线计算器上使用 jQuery 选择器查找所有计算器按钮的总金额

javascript - 你能从 Date().getTime 得到年/月/日吗

php - 循环连接时出现太多连接错误

php - 从表单输入中获取值,将其乘以 MySQL 表单元格值,并将结果写入同一表中的另一个单元格

Javascript 背景图像 url css 更改

javascript - 使行扩展元素即 extjs 网格和图表可在窗口调整大小时调整大小

html - 悬停链接时不显示 CSS 下拉菜单

javascript - 基于数组过滤对象的属性。并获取过滤后的对象

javascript - 具有 Ng-Repeat 的动态 Ng 模型

php - Laravel连接远程mysql数据库