Question

我有两页demo1.html和demo2.html。我想使用JavaScript / Jquery在iframe中打开这两个。 Demo1.html有一些内容框，里面有一个按钮，demo2.html里面有一些多选下拉菜单。现在我必须实现两种不同的场景。

1-当我点击demo1.html中的任何一个按钮时，我想在iframe中打开demo2.html，并根据demo1中按钮的id / class选择一些选项。

2-当我在demo2页面中做了一些选择时，即使我再次打开demo1，我希望它们在那里。

示例代码如下。到目前为止我还没有找到任何运气。任何想法我该怎么做？感谢

索引页：

<!DOCTYPE html>
<html>

<head>
  <title>index</title>
  <style type="text/css">
    .tabConWrap {
    width:98%;    
    position:relative;
    padding-top:28px;
    margin:10px auto 30px;
    border-bottom:4px solid #39f;
    text-align:left;
}
.tabs {
    width:auto;
    height:28px;
    margin:0px 0px;
    padding:0px 0px;
}
.tabs li {    
    margin:0px 2px 0px 0px;
    padding:0px 0px;
    display:inline;
    font:bold 12px Arial,Sans-Serif;
}
.tabs li a {
    background-color:#39f; 
    color:white;
    padding:7px 10px; 
    text-decoration:none;
    border:1px solid #ccc;
    border-bottom:none;
    -webkit-border-radius:5px 5px 0px 0px;
    -moz-border-radius:5px 5px 0px 0px;
    border-radius:5px 5px 0px 0px;
}
.tabs .currentTab {
    background-color:white; 
    color:#999;
    position:relative;
    z-index:7;
}
.tabContainer {
    padding:10px;
    height:1000px;
    background-color:white;
    border:1px solid #ccc;
    position:relative;
    margin-top:-3px;
    z-index:2;
    overflow:hidden;
}
.tabContainer iframe {
    border:none;
    width:100%;
    height:100%;
}

h2#loading {
    width:100px;
    text-align:center;
    font:bold 11px Arial,Sans-Serif;
    position:absolute;
    top:0px;
    left:50%;
    margin-left:-50px;
    padding:5px 0px;
    background-color:#BC151A;
    color:white;    
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      var tabs = $('.tabs li a'),
      tabContents = $('div.tabContainer');

      tabs.eq(0).addClass('currentTab');

      tabs.click(function() {
          tabs.removeClass();
          $(this).addClass('currentTab');
          tabContents.animate({height:0}, 'slow')
              .find('iframe').attr('src', $(this).attr('href'))
          // $('body').append('<h2 id="loading">Loading...</h2>');
          return false;
      });
      $('div.tabConWrap iframe').bind("load", function() {
          tabContents.animate({height:1000}, 'slow');
          $('h2#loading').remove();
      });
  });
  </script>
</head>

<body>
  <div class="tabConWrap">
    <ul class="tabs">
        <li><a href="demo1.html">demo1</a></li>
        <li><a href="demo2.html">demo2</a></li>
    </ul>

    <div class="tabContainer">
        <iframe name="myframe"></iframe>
    </div>
  </div>
</body>

</html>

演示1页面：

<html>

<head>
  <title>index</title>
  <style type="text/css">
    .box1,.box2,.box3{
      border: 1px solid black;
      height: 50px;
      width: 100px;
      margin-left: 15px;
      display: inline-block
    }
  </style>
</head>
<body>
  <div class="box1">box1
    <button>button1</button>
  </div>
  <div class="box2">box2
  <button>button2</button>
</div>
  <div class="box3">box3
  <button>button3</button>
</div>
</body>

</html>

演示2页面：

<html>
<body>

<div>
  <select name="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit">
</div>
<div>
  <select name="bike" multiple>
    <option value="volvo">honda</option>
    <option value="saab">yamaha</option>
    <option value="opel">Suzuki</option>
    <option value="audi">metro</option>
  </select>
  <input type="submit">
</div>
<div>
  <select name="random" multiple>
    <option value="volvo">abc</option>
    <option value="saab">def</option>
    <option value="opel">xyz</option>
    <option value="audi">www</option>
  </select>
  <input type="submit">
</div>



<p>Use ctrl+click to select multiple options</p>

</body>
</html>

如何保留在iframe中打开的页面状态？

0 个答案: