Iframe не загружается в Jquery

ProgramBox

Iframe не загружается в Jquery

Post author:admin
Запись опубликована:25 января, 2022
Post category:Вопросы по программированию

#javascript #html #jquery #css #iframe

Вопрос:

первый раз публикую,

Итак, моя проблема в том, что я создавал макет вкладок с виджетами jQuery, и в них я создал макет flexbox, заполненный несколькими кадрами iframe

первая вкладка работала очень хорошо, но когда я перешел ко второй, макет 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" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></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" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></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" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></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" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></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" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></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" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></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" alt="" width="293" height="220" /></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" alt="" width="293" height="220" /></a>

      </div>
      <div class="flex-item">
        <h3>Product Name</h3>
        <iframe src="https://www.thinglink.com/card/1429150275620306946" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></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" alt="" width="293" height="220" /></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" alt="" width="293" height="220" /></a>

      </div>
      <div class="flex-item">
        <h3>Product Name</h3>
        <iframe src="https://www.thinglink.com/card/1429150275620306946" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></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

PS Я только что понял это после завершения вопроса, если я введу идентификатор в URL «/#вкладки-2», он приведет меня на эту вкладку, и iframe загрузится, а страница продолжит загружаться [введите описание изображения здесь][2] [2]: https://i.stack.imgur.com/nutip.png

Я думаю, я действительно не знаю, что я делаю, спасибо вам за вашу помощь, также все это сделано на WordPress

1. Почему вы делаете <script async src="//cdn.thinglink.me/jse/responsive.js"> это снова и снова?

2. Похоже, что скрипт для отзывчивости каким-то образом устанавливает все ваши высоты iframe равными нулю

3. «<script async=»» src=»//cdn.thinglink.me/jse/responsive.js»>» that one comes with the iframe code from where I’m making the content here’s how it looks… » <iframe width=»400″ height=»400″ data-original-width=»400″ data-original-height=»400″ src=» thinglink.com/card/1429152214995173378 » type=»text/html» frameborder=»0″ webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling=»no»></iframe><script async src=»//cdn.thinglink.me/jse/responsive.js»></script>»

Ответ №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"
      width="400"
      height="400"
      frameborder="0"
      scrolling="no"
      data-original-width="400"
      data-original-height="400"
      webkitallowfullscreen
      mozallowfullscreen
      allowfullscreen
    ></iframe>
    <iframe
      src="https://www.thinglink.com/card/1428459923062128642"
      width="400"
      height="400"
      frameborder="0"
      scrolling="no"
      data-original-width="400"
      data-original-height="400"
      webkitallowfullscreen
      mozallowfullscreen
      allowfullscreen
    ></iframe>

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