iframe 未在 Jquery 中加载

Posted 2023-05-08

技术标签:

【中文标题】iframe 未在 Jquery 中加载【英文标题】：Iframe not loading within Jquery 【发布时间】：2021-06-16 05:38:12 【问题描述】：

第一次发帖，

所以我的问题是我正在使用 jQuery 小部件创建选项卡布局，并在其中创建了一个填充多个 iframe 的 flexbox 布局

第一个选项卡工作得非常好，但是当我转到第二个选项卡时，flexbox 布局仍然有效，但 iframe 没有显示。我不知道为什么，我认为可能是 jQuery 不让其他选项卡上的 iframe 加载？

$(function() 
  $("#tabs").tabs();
);

.context-content .h3,
.context-content h3 
  margin-top: 5px;
  margin-bottom: 0px;
  margin-left: -30px;


.panel .context-content ol,
.panel .context-content ul 
  margin-top: 0px;
  margin-bottom: 0px;


.context-content>:last-child 
  margin-bottom: 0;
  margin-left: -8px;


.ui-widget.ui-widget-content 
  border: 0px !important;


.ui-widget-header 
  border: 0px solid !important;
  background: white !important;
  color: #333333;
  font-weight: bold;


.ui-tabs .ui-tabs-nav li 
  font-size: 15px;
  font-weight: 700;
  padding: 13px 26px;
  display: block;
  background: #f6f6f6;
  color: #6c6c6b;
  border: 1px solid #eee;
  position: relative;


.ui-tabs .ui-tabs-panel 
  display: block;
  border-width: 0;
  padding: 1em 3em !important;
  background: none;
  margin-left: -17px !important;


#tabs-2.ui-tabs-panel 
  display: block;
  border-width: 0;
  padding: 1em 3em;
  background: none;
  margin-left: -59px !important;


.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover 
  border: 0px solid;
  background: #757575 !important;
  font-weight: normal;
  color: #ffffff;



/* Start FlexBox */

.container 
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  list-style: none;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<span style="color: #999999;">Select (+) for more product information. Please contact your Steelcase representative for pricing information.</span>
<div id="tabs" class="ui-tabs ui-widget">
  <ul class="ui-tabs-nav">
    <li><a href="#tabs-1">Lounge Chairs</a></li>
    <li><a href="#tabs-2">Sofa and Loveseats</a></li>
    <li><a href="#tabs-3">Metal-Framed Ganged Units</a></li>
    <li><a href="#tabs-4">Wood-Framed Gange Units</a></li>
    <li><a href="#tabs-5">Modular Lounge Systems</a></li>
    <li><a href="#tabs-6">Benches and Ottomans</a></li>
  </ul>
  <div id="tabs-1">
    <div class="container">
      <div class="flex-item">
        <h3>Await by Coalesse</h3>
        <iframe src="https://www.thinglink.com/card/1428458712988647426"   frameborder="0" scrolling="no" data-original- data-original-></iframe>
        <script async src="//cdn.thinglink.me/jse/responsive.js"></script>

      </div>
      <div class="flex-item">
        <h3>B-Free by Steelcase</h3>
        <iframe src="https://www.thinglink.com/card/1428459923062128642"   frameborder="0" scrolling="no" data-original- data-original-></iframe>
        <script async src="//cdn.thinglink.me/jse/responsive.js"></script>

      </div>
      <div class="flex-item">
        <h3>Bivi Rumble Seat with Hoodie</h3>
        <iframe src="https://www.thinglink.com/card/1428481989148672002"   frameborder="0" scrolling="no" data-original- data-original-></iframe>
        <script async src="//cdn.thinglink.me/jse/responsive.js"></script>

      </div>
      <div class="flex-item">
        <h3>Bix by Coalesse</h3>
        <iframe src="https://www.thinglink.com/card/1428484701294690306"   frameborder="0" scrolling="no" data-original- data-original-></iframe>
        <script async src="//cdn.thinglink.me/jse/responsive.js"></script>

      </div>
      <div class="flex-item">
        <h3>Bob by Coalesse</h3>
        <iframe src="https://www.thinglink.com/card/1428485668257923074"   frameborder="0" scrolling="no" data-original- data-original-></iframe>
        <script async src="//cdn.thinglink.me/jse/responsive.js"></script>

      </div>

      <div class="flex-item">
        <h3>Coupe by Coalesse</h3>
        <iframe src="https://www.thinglink.com/card/1428488537619038210"   frameborder="0" scrolling="no" data-original- data-original-></iframe>
        <script async src="//cdn.thinglink.me/jse/responsive.js"></script>

      </div>
    </div>
  </div>
  <div id="tabs-2">
    <div class="container">
      <div class="flex-item">
        <h3>Product Name</h3>
        <a href="#"><img class="alignnone size-full wp-image-4838" src="https://srn-kaiser-temp.dealerwebadmin.com/wp-content/uploads/sites/1472/2021/02/greybox.jpg"    /></a>

      </div>
      <div class="flex-item">
        <h3>Product Name</h3>
        <a href="#"><img class="alignnone size-full wp-image-4838" src="https://srn-kaiser-temp.dealerwebadmin.com/wp-content/uploads/sites/1472/2021/02/greybox.jpg"    /></a>

      </div>
      <div class="flex-item">
        <h3>Product Name</h3>
        <iframe src="https://www.thinglink.com/card/1429150275620306946"   frameborder="0" scrolling="no" data-original- data-original-></iframe>
        <script async src="//cdn.thinglink.me/jse/responsive.js"></script>

      </div>
      <div class="flex-item">
        <h3>Product Name</h3>
        <a href="#"><img class="alignnone size-full wp-image-4838" src="https://srn-kaiser-temp.dealerwebadmin.com/wp-content/uploads/sites/1472/2021/02/greybox.jpg"    /></a>

      </div>
    </div>
  </div>
  <div id="tabs-3" style="display: none;">
    <div class="container">
      <div class="flex-item">
        <h3>Product Name</h3>
        <a href="#"><img class="alignnone size-full wp-image-4838" src="https://srn-kaiser-temp.dealerwebadmin.com/wp-content/uploads/sites/1472/2021/02/greybox.jpg"    /></a>

      </div>
      <div class="flex-item">
        <h3>Product Name</h3>
        <iframe src="https://www.thinglink.com/card/1429150275620306946"   frameborder="0" scrolling="no" data-original- data-original-></iframe>
        <script async src="//cdn.thinglink.me/jse/responsive.js"></script>

      </div>
    </div>
  </div>
  <div id="tabs-4" style="display: none;">

    tabs-4 content

  </div>
  <div id="tabs-5" style="display: none;">

    tabs-5 content

  </div>
  <div id="tabs-6" style="display: none;">

    tabs-6 content

  </div>
</div>

我对javascript知之甚少，如有任何帮助，将不胜感激，谢谢！！顺便说一句，这是带有 iframe 的第二个选项卡的外观 Iframe space

PS 如果我将 id 放在 URL "/#tabs-2" 中，我在完成问题后才意识到这一点它将带我到该选项卡，iframe 将加载，页面将继续加载 [在此处输入图片描述][2] [2]：https://i.stack.imgur.com/nutip.png

我想我真的不知道我在做什么，谢谢你的帮助，所有这些都是在 WordPress 上制作的

【问题讨论】：

你为什么一遍又一遍的<script async src="//cdn.thinglink.me/jse/responsive.js">？看起来响应式脚本以某种方式将所有 iframe 高度设置为零 "" 【参考方案1】：

它确实有效。仅将脚本放在主体上一次

尝试运行这个文件，它成功了

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link
      rel="stylesheet"
      href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
    />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
  <body>
    <iframe
      src="https://www.thinglink.com/card/1428458712988647426"
      
      
      frameborder="0"
      scrolling="no"
      data-original-
      data-original-
      webkitallowfullscreen
      mozallowfullscreen
      allowfullscreen
    ></iframe>
    <iframe
      src="https://www.thinglink.com/card/1428459923062128642"
      
      
      frameborder="0"
      scrolling="no"
      data-original-
      data-original-
      webkitallowfullscreen
      mozallowfullscreen
      allowfullscreen
    ></iframe>

    <script async src="//cdn.thinglink.me/jse/responsive.js"></script>
  </body>
</html>

【讨论】：

如果您使用的是wordpress，则使用脚本页眉和页脚插件将脚本添加到正文的页脚处。

以上是关于iframe 未在 Jquery 中加载的主要内容，如果未能解决你的问题，请参考以下文章

iFrame 未在 Flex 弹出窗口中加载

iFrame 未在 FireFox 的选项卡中加载

Javascript iframe 未在引导弹出窗口中加载（模式）

Python Shopify应用程序未在Safari iframe中加载

jQuery插件未在WordPress中加载

jQuery 和 Underscore 未在 RequireJS 中加载