时间戳

首页 > 解决方案 > 带有 iframe 的 div，不显示

javascript - 带有 iframe 的 div，不显示

问题描述

我有一个页面，我在其中显示来自另一个页面的 iframe。我希望 iframe 在加载时显示：无并在单击时可见。问题是，如果 div 在加载时可见，我可以让它工作。如果它在加载时隐藏，则 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>

标签： javascripthtml

解决方案

click()您可以使用jQuery的功能轻松显示 Div 内的元素。您需要包含 jQuery CDN 或 jQuery 文件来运行 jQuery 脚本。

      $(document).ready(function() {
        $("#showMe").click(function () {
          $("#myDIV").show();
        })
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></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 id = "showMe" href="#">Springfield, Ohio Menu</a></p>
          <div id="myDIV" style="display: none">
            <div >
              <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;">
              <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>

我已经用两个菜单更新了 Fiddle。 https://jsfiddle.net/9b15gw0f/

推荐阅读