将 HTML 装入<div></div><div id="text_translate"><p><em><strong>小提琴</strong>： <a href="https://jsfiddle.net/x9ghz1ko/" rel="nofollow noreferrer">https://jsfiddle.net/x9ghz1ko/</a> （带评论。）</em></p><p> 我有一个<strong>HTML 文档</strong>，在这个文档里面，有<strong>两个部分</strong>： <section class="desktop_only">和<section class="mobile_only"> - 在代码中，在这些部分之前，有一个<strong>脚本</strong>，这个脚本应该<strong>删除两个部分之一</strong>，但问题是：为此，我必须将脚本放在部分之后，但我不能这样做，因为部分内有更多脚本，我必须删除它们在他们跑之前。</p><p> 我的代码的简化版本：（……不工作。） </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> <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></pre></div></div><p></p><p> <strong>也许一种解决方案是：</strong>我有一个空的<div> ，称为".platform_dependent" ，我有两个外部文件，称为： desktop_only.something和mobile_only.something然后我将这些文件的内容加载到: platform_dependent.innerHTML ...但我不知道该怎么做？</p></div>

Question

小提琴： 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>

也许一种解决方案是：我有一个空的<div> ，称为".platform_dependent" ，我有两个外部文件，称为： desktop_only.something和mobile_only.something然后我将这些文件的内容加载到: platform_dependent.innerHTML ...但我不知道该怎么做？

Answer 1

我认为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>

Answer 2

您可以更改该 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>

Answer 3

这就是我最终做的事情：

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

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

感谢大家的投入：:) – 西蒙

问题描述

3 个解决方案

解决方案1
1 2021-01-12 14:13:39

解决方案2
0 2021-01-12 15:21:37

解决方案3
0 2021-01-12 15:30:09

问题描述

3 个解决方案

解决方案1 1 2021-01-12 14:13:39

解决方案2 0 2021-01-12 15:21:37

解决方案3 0 2021-01-12 15:30:09

解决方案1
1 2021-01-12 14:13:39

解决方案2
0 2021-01-12 15:21:37

解决方案3
0 2021-01-12 15:30:09