时间戳

首页 > 解决方案 > 重新加载 DOM 元素而不重新加载整个页面（修改源 html）

javascript - 重新加载 DOM 元素而不重新加载整个页面（修改源 html）

问题描述

假设我有一个WebGL应用程序，并且在 HTML 文档中内联着色器，我想要的是更改 HTML 文档并重新加载着色器而不重新加载整个站点，我使用 iframe 进行了修复，但这是可能的最糟糕的解决方案因为WebGL应用程序（以及他所有的回调）运行了两次，有没有更好的解决方案来解决这个问题？

let frame = document.getElementById("iframe");

// Reload the shaders when R is pressed
window.addEventListener("keypress", e => {
  if (e.code === "KeyR") {
    // Reload the html document of the iframe
    frame.contentDocument.location.reload(true);

    // Get the sources from the iframe and reload the shaders
    reloadShaders();
  }
});

我不希望重新加载整个页面以不丢失我正在做的事情的状态，只需实时更改着色器，我也不希望使用专门用于此任务的服务器，在此先感谢。

内联着色器示例

<script type="glsl" id="basic.vs">#version 300 es
void main() {
  gl_Position = vec4(
    2 * (gl_VertexID / 2) - 1,
    2 * (gl_VertexID % 2) - 1,
    0.0, 1.0
  );
}
</script>

标签： javascripthtmldomdom-eventswebgl

解决方案

推荐阅读