javascript - 包含iframe的div，不显示任何内容(div with iframe in it, display none)

Question

I have a page where I am displaying a iframe from another page.

(我有一个页面，我正在其中显示另一个页面的iframe。)

I want that iframe to be display:none at load and become visible onClick.

(我希望该iframe在加载时不显示：在onClick上可见。)

The issue is, I can get it to work if the div is visible at load.

(问题是，如果div在加载时可见，我可以使它工作。)

If it is hidden at load, the onclick doesnt work properly.

(如果它在加载时被隐藏，则onclick无法正常工作。)

<script>
    function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
    </script>


<div style="margin-top:30px;">
        <h2>Menu</h2>
        <p>Dayton, Ohio Menu Coming Soon. It can be viewed currently at <a href="https://www.leafly.com/dispensary-info/pure-ohio-wellness" target="_blank" style="color:green">here</a></p>
            <p><a onClick="myFunction()">Springfield, Ohio Menu</a></p>
            <div>
            <div id="myDIV" style="display: none">
        <div id="leafly-menu">
            </div>
            <div style="text-align:center;">
            </div>
            <script src="https://www.leafly.com/public/global/js/dispensarymanager/embed.js"></script>
<script>var pymParent = pym.Parent('leafly-menu', 'https://www.leafly.com/embed/menu2/pure-ohio-wellness---springfield', {});</script>
        </div>
        <div style="overflow: hidden; margin: 15px auto; max-width: 975px;display: none;">
<iframe scrolling="no" src="https://www.leafly.com/dispensary-info/pure-ohio-wellness---springfield" style="border: 0px none; margin-left: -36px; height: 1012px; margin-top: -486px; width: 1050px;">
</iframe>
</div>
          </div>
        </div>

  ask by Russell Ehrnsberger translate from so

Answer 1

I think the functionality you're looking for here can be solved with the visibility:hidden tag, as I've had similar experienced with the "display:none" css property.

(我认为您可以在这里找到所需的功能，可以通过visible：hidden标记解决，因为我对“ display：none” css属性也有类似的经验。)

Definitely worth another google for differences between the two, but the w3schools snippet here seems to summarize things pretty well.

(两者之间的差异绝对值得让另一个Google值得一试，但是这里的w3schools片段似乎总结得很好。)

Hope this helps!

(希望这可以帮助！)