时间戳

首页 > 解决方案 > 允许在 iframe 中使用 javascript（从 google webdesigner 添加 html 文件）

javascript - 允许在 iframe 中使用 javascript（从 google webdesigner 添加 html 文件）

问题描述

我们有许多由 Google webdesigner 生成的动画，当用户点击某个 td 元素时会弹出这些动画。我发现添加这些动画的唯一方法是有一个 iframe，所以我们有一个固定的 iframe，我们用这些动画更新 src

编辑.cshtml：

<iframe id="popUpFrame"></iframe>
<script src="~/js/popUp/popUp.js"></script>

在这个文件的末尾，我们有几个由 Google webdesigner 创建的“应用程序”（生成到 html 文件） id 为 01 的元素是 td 元素，它在点击时收听

// PopUps
let frame_elem = document.getElementById("popUpFrame")
//speedtest popup-01
let speedtest_elem = document.getElementById("01")
hoPopUp(frame_elem, speedtest_elem, "505px", "505px", "/images/PopUps/01.html")

popup.js 文件：

function hoPopUp(frame_elem, td_elem, width, height, file_path){
    frame_elem.style.width = width
    frame_elem.style.height = height
    frame_elem.style.top = "50%"
    frame_elem.style.left = "50%"
    td_elem.addEventListener("click", function () { showIframe(frame_elem, file_path) })
    td_elem.addEventListener("mouseout", function () { hideIframe(frame_elem) })

}

function showIframe(frame_elem, file_path) {
    frame_elem.setAttribute("src", file_path)
    frame_elem.classList.add("active")
}

function hideIframe(frame_elem){
    frame_elem.classList.remove('active')
    frame_elem.removeAttribute('src')
}

google webdesigner html 文件充满了 javascript 代码，但我不知道如何允许它。我们发现 Add blocker 正在阻止它，所以我们通过向某个 add 发送一些 fetch 请求来创建对 add blocker 的检测，但是我的同事正在使用 uBlocker，而检测机制不起作用。

问题是，如何允许在 iframe 中运行 javascript。为什么浏览器工具会阻止从我自己的网站“下载”javascript？

谢谢你的帮助

标签： javascriptiframegoogle-web-designer

解决方案

uBlocker 正在做一些“美容过滤”，所以通过发送一些 javascript 提取请求来添加检测不起作用......

我们没有尝试检测浏览器的工具，而是为每个网页设计师生成的 html 代码添加了注释：

<body>
    <div style="width: 100%; position:absolute; top:50%;">
          <p style="display:flex; justify-content:center;">
              Please disable add blocker and content filters on this site
          </p>
      </div>

如果允许 javascript 使用 webdesigner html 代码在 iframe 内运行，则动画将在此注释上

推荐阅读