将HTML加载到<div>中。

Question

将HTML加载到<div>中。

3

Fiddle: https://jsfiddle.net/x9ghz1ko/（附有注释。）

我有一个HTML文档，其中包含两个部分：<section class="desktop_only">和<section class="mobile_only"> - 在代码中，这些部分之前有一个脚本，该脚本应该删除其中一个部分，但问题是：为了实现此目的，我必须将脚本放在这些部分之后，但我不能这样做，因为在这些部分内还有更多的脚本，并且我必须在它们运行之前将它们删除。

我的代码简化版：（...不起作用。）

<script>
device = "desktop"; // This could be either: "desktop", or: "mobile"

if(device === "desktop"){
        document.querySelector(".mobile_only").remove(); // Not doing anything.
} else {
        document.querySelector(".desktop_only").remove(); // Not doing anything.
}
</script>

<section class="desktop_only">
    <script src="example.js"></script>
    <script> console.log("desktop_only") </script>
    <div> desktop </div>
</section>

<section class="mobile_only">
    <script src="example.js"></script>
    <script> console.log("mobile_only") </script>
    <div> mobile (Delete this.) </div>
</section>

也许一个解决方案是：我有一个空的

，称之为：".platform_dependent"，并且我有两个外部文件：desktop_only.something 和 mobile_only.something，然后我将其中一个文件的内容加载到：platform_dependent.innerHTML 中...但我不知道如何实现？

- Simon R.

1

您正在加载 HTML 之前执行脚本。请将 <script> 标签移至所有 HTML 之后。 - Jeremy Thille

@JeremyThille 我知道，但我不能这样做，因为接下来会发生以下事情：desktop_only和mobile_only中的所有脚本都将运行，然后我将删除它们，但它们已经被执行了 - 这就是问题所在。 - Simon R.

1

@JeremyThille 你没有仔细阅读问题。原帖作者知道加载顺序，但是试图避免在适当的div被删除之前运行div中的脚本。 - pilchard

1

好的，问题已经重新开放。回到主题，将<script>写在HTML代码中间是毫无意义的，应该全部放在<head>或<body>的末尾。在HTML中间写它只会制造混乱。 - Jeremy Thille

1

@SimonR. 看看这个问题：如何注入一个带有远程src的脚本标签并等待其执行。 - pilchard

显示剩余5条评论

3个回答

0

您可以更改那些 div 的显示属性来隐藏它们。在移动或桌面功能中执行此操作，并根据 window.innerWidth 调用它们。

<div class="mobileonly">
    mobile
</div>
<div class="desktoponly">
    desktop
</div>
<script>
    var mobileDiv = document.querySelector(".mobileonly")
    var desktopDiv = document.querySelector(".desktoponly")

    function mobile() {
        console.log("mobile");
        mobileDiv.style.display = "block"
        desktopDiv.style.display = "none"
    }

    function desktop() {
        console.log("desktop");
        mobileDiv.style.display = "none"
        desktopDiv.style.display = "block"
    }
    let deviceWidth = window.innerWidth
    if (deviceWidth > 800) {
        desktop()
    } else {
        mobile()
    }
</script>

- TKDEV Tomino

这真的不是关于视口大小，而是像：追踪鼠标位置的脚本不应该在移动设备上运行，它不仅仅是一个脚本，我也不想将它们合并为一个文件，因为我觉得那会让事情变得不必要的复杂。我已经解决了它，现在发布我的答案，但非常感谢你的回答！ - Simon R.

0

这是我最终做的事情：

在我的HTML的中，有一个小脚本来检查设备是否连接了类似鼠标的东西，如果有：userOnMobile = false，如果没有：userOnMobile = true。

所有链接到HTML的外部脚本都应该只在桌面或移动设备上运行，首先检查userOnMobile-variable，然后执行它们的操作，或者什么也不做。

感谢大家的帮助！:) - Simon

- Simon R.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ztom · Accepted Answer

我认为DOMContentLoaded是你要找的。这个事件在初始HTML文档完全加载后触发。

<script>
  var device = "desktop"; // This could be either: "desktop", or: "mobile"

  document.addEventListener("DOMContentLoaded", function(event) {
    if(device === "desktop")
      document.querySelector(".mobile_only").remove(); // Not doing anything.
    else
      document.querySelector(".desktop_only").remove(); // Not doing anything.
  });
</script>

<section class="desktop_only">
    <script src="example.js"></script>
    <script> console.log("desktop_only") </script>
    <div> desktop </div>
</section>

<section class="mobile_only">
    <script src="example.js"></script>
    <script> console.log("mobile_only") </script>
    <div> mobile (Delete this.) </div>
</section>