部署在Heroku的应用在Firefox中遇script标签后停止渲染求助
我的应用部署到Heroku后,Firefox浏览器在加载到某一特定script标签时就停止页面渲染,但相同应用在本地部署时运行完全正常。以下是出现该问题的Heroku站点链接(截至撰稿时仍存在故障):
https://idom-docs.herokuapp.com
经检查控制台无特殊报错,页面仅在遇到该script标签后直接停止渲染。
以下是问题演示GIF:左侧为Chromium内核浏览器,右侧为Firefox。可见Chromium可正常滚动浏览全部示例,而Firefox即便所有资源都已加载完成,也仅能渲染第一个示例,之后页面停留在加载状态。但切换到本地部署的站点时,Firefox可正常完成全页渲染。
相关script代码示例如下:
<script async type="module"> import {{ mountWidgetExample }} from "/_static/custom.js"; mountWidgetExample("some-element-id", "some-uuid", "/_host"); </script>
custom.js内容如下:
import { mountLayoutWithWebSocket } from "idom-client-react"; const LOC = window.location; const HTTP_PROTO = LOC.protocol; const WS_PROTO = HTTP_PROTO === "https:" ? "wss:" : "ws:"; const IDOM_MODULES_PATH = "/_modules"; export function mountWidgetExample(mountID, viewID, idomServerHost) { const idom_url = "//" + (idomServerHost || LOC.host); const http_idom_url = HTTP_PROTO + idom_url; const ws_idom_url = WS_PROTO + idom_url; const mountEl = document.getElementById(mountID); const enableWidgetButton = document.createElement("button"); enableWidgetButton.appendChild(document.createTextNode("Enable Widget")); enableWidgetButton.setAttribute("class", "enable-widget-button"); enableWidgetButton.addEventListener("click", () => fadeOutElementThenCallback(enableWidgetButton, () => { { mountEl.removeChild(enableWidgetButton); mountEl.setAttribute("class", "interactive widget-container"); mountLayoutWithWebSocket( mountEl, ws_idom_url + `/_idom/stream?view_id=${viewID}`, (source, sourceType) => loadImportSource(http_idom_url, source, sourceType) ); } }) ); function fadeOutElementThenCallback(element, callback) { { var op = 1; // initial opacity var timer = setInterval(function () { { if (op < 0.001) { { clearInterval(timer); element.style.display = "none"; callback(); } } element.style.opacity = op; element.style.filter = "alpha(opacity=" + op * 100 + ")"; op -= op * 0.5; } }, 50); } } mountEl.appendChild(enableWidgetButton); } function loadImportSource(baseUrl, source, sourceType) { if (sourceType == "NAME") { return import(baseUrl + IDOM_MODULES_PATH + "/" + source); } else { return import(source); } }
内容的提问来源于stack exchange,提问作者rmorshea
相关产品推荐
相关产品推荐

