Javascript display:block to display:none和back使嵌入的SVG元素消失，除非在本地托管_Javascript_Html_Css

Javascript display:block to display:none和back使嵌入的SVG元素消失，除非在本地托管

javascript html css

Javascript display:block to display:none和back使嵌入的SVG元素消失，除非在本地托管,javascript,html,css,Javascript,Html,Css,在切换到和切换到display:block后，我无法使s或s中的SVG重新出现，除非它们位于本地（从文件中引用：//）。例如： <head> <style> div { border: 1px solid black; margin: 5px; } </style> </head> <body> <script> function toggle() { console.log("toggling");

在切换到和切换到

display:block

后，我无法使s或s中的SVG重新出现，除非它们位于本地（从

文件中引用：//

）。例如：

<head>
<style>
div {
  border: 1px solid black;
  margin: 5px;
}
</style>
</head>
<body>
<script>
function toggle() {
    console.log("toggling");
    var con = document.getElementById('container');
    console.log(con.style.display);
    if(con.style.display == 'block') {
        con.style.display = 'none';
    } else {
        con.style.display = 'block';
    }
}
</script>
<div id="container" style="display:block">
    <embed src="https://cdn.jsdelivr.net/gh/Eiim/4611-2019-scouting/resources/svg/CargoShip.svg">
    <p>I'm some text!</p>
</div>
<h1 onclick="toggle()">Toggle it all!</h1>
</body>


div{
边框：1px纯黑；
保证金：5px；
}
函数切换（）{
控制台日志（“切换”）；
var con=document.getElementById（'container'）；
console.log（con.style.display）；
如果（con.style.display=='block'）{
con.style.display='none'；
}否则{
con.style.display='block'；
}
}
我在发短信
切换它的所有！

我只测试了Chrome71，但这似乎是一种奇怪的行为。据我所知，切换前后DOM没有区别。我还尝试嵌入一些文本（特别是），但它仍然显示文本，但在切换后不允许我进行交互。这只是一个Chrome bug，还是我代码中的bug？有解决办法吗？提前感谢。

使用嵌入更新。你的语法错了

      <head>
        <style>
        div {
          border: 1px solid black;
          margin: 5px;
        }
        </style>
        </head>
        <body>
        <script>
        function toggle() {
            console.log("toggling");
            var con = document.getElementById('container');
            console.log(con.style.display);
            if(con.style.display == 'block') {
                con.style.display = 'none';
            } else {
                con.style.display = 'block';
            }
        }
        </script>
        <div id="container" style="display:block">
            <img src="https://cdn.jsdelivr.net/gh/Eiim/4611-2019-scouting/resources/svg/CargoShip.svg">

 <embed type="image/svg+xml" src="https://cdn.jsdelivr.net/gh/Eiim/4611-2019-scouting/resources/svg/CargoShip.svg">
            <p>I'm some text!</p>
        </div>
        <h1 onclick="toggle()">Toggle it all!</h1>
        </body>


div{
边框：1px纯黑；
保证金：5px；
}
函数切换（）{
控制台日志（“切换”）；
var con=document.getElementById（'container'）；
console.log（con.style.display）；
如果（con.style.display=='block'）{
con.style.display='none'；
}否则{
con.style.display='block'；
}
}
我在发短信
切换它的所有！

使用嵌入更新。你的语法错了

      <head>
        <style>
        div {
          border: 1px solid black;
          margin: 5px;
        }
        </style>
        </head>
        <body>
        <script>
        function toggle() {
            console.log("toggling");
            var con = document.getElementById('container');
            console.log(con.style.display);
            if(con.style.display == 'block') {
                con.style.display = 'none';
            } else {
                con.style.display = 'block';
            }
        }
        </script>
        <div id="container" style="display:block">
            <img src="https://cdn.jsdelivr.net/gh/Eiim/4611-2019-scouting/resources/svg/CargoShip.svg">

 <embed type="image/svg+xml" src="https://cdn.jsdelivr.net/gh/Eiim/4611-2019-scouting/resources/svg/CargoShip.svg">
            <p>I'm some text!</p>
        </div>
        <h1 onclick="toggle()">Toggle it all!</h1>
        </body>


div{
边框：1px纯黑；
保证金：5px；
}
函数切换（）{
控制台日志（“切换”）；
var con=document.getElementById（'container'）；
console.log（con.style.display）；
如果（con.style.display=='block'）{
con.style.display='none'；
}否则{
con.style.display='block'；
}
}
我在发短信
切换它的所有！

Webkit浏览器确实会在从DOM中删除或隐藏时卸载由这两个元素加载的文档

这里到底发生了什么还不清楚，但听起来很像一个bug，每次显示元素时他们都会重新加载一个新文档（在闪烁中，一个更大的bug会在隐藏时以无限循环的方式重新加载）

obj.onload=emb.onload=e=>console.log（e.target.nodeName，'loaded'）
input:checked~对象，input:checked~嵌入{
显示：无；
}
切换显示
Webkit浏览器确实会在从DOM中删除或隐藏时卸载由这两个元素加载的文档
这里到底发生了什么还不清楚，但听起来很像一个bug，每次显示元素时他们都会重新加载一个新文档（在闪烁中，一个更大的bug会在隐藏时以无限循环的方式重新加载）

obj.onload=emb.onload=e=>console.log（e.target.nodeName，'loaded'）
input:checked~对象，input:checked~嵌入{
显示：无；
}
切换显示
我已经使用img进行了测试。这似乎很好用。这是webkit（safari+Blink）中的一个已知怪癖。不过，他们做这件事的时候并不是很紧张。韩：我很确定我已经回答了。。。她是，但还不够好，我已经用img测试过了。这似乎很好用。这是webkit（safari+Blink）中的一个已知怪癖。不过，他们做这件事的时候并不是很紧张。韩：我很确定我已经回答了。。。她是，但还不够好，不适合被愚弄。然后你就没有访问内部文档的权限。正如@kaido所说，这确实阻止了我访问svg来动态更改它，这就是为什么我一开始没有使用s的原因，但我肯定可以解决它。知道为什么s不起作用吗？不@Raahul：请记住，大多数现代浏览器都不赞成并取消了对浏览器插件的支持，因此，如果您希望您的站点能够在普通用户的浏览器上运行，那么依赖它通常是不明智的：@soulshined，除了所有浏览器都支持SVG之外，因此没有涉及插件。然后你就没有访问内部文档的权限。正如@kaido所说，这确实阻止了我访问svg来动态更改它，这就是为什么我最初没有使用s的原因，但我肯定可以解决它。知道为什么s不起作用吗？不@Raahul：请记住，大多数现代浏览器都不赞成并取消了对浏览器插件的支持，因此，如果您希望您的站点能够在普通用户的浏览器上运行，那么依赖它通常是不明智的：@soulshined，除了所有浏览器都支持SVG，因此不涉及插件。