javascript 在下拉菜单中组合iFrame和target_blank选项

pdkcd3nj 于 2023-06-20 发布在 Java

关注(0)|答案(1)|浏览(74)

我有一个简单的下拉菜单，我用我的网络客户端，加载模块为他们的网站到一个iframe，以方便访问（与。必须记住几个不同的登录）。我想添加快速链接到他们的托管公司/等。在下拉列表以及，但我希望这些在一个新的标签打开。有办法做到这一点吗？
这是我的代码，非常感谢大家的帮助!：

<!DOCTYPE html>
<html>
<head>
<title>Easy Admin</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
</head>
<body>

<style type="text/css">
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background:url(images/body_bg.jpg);
    margin: 0;
    padding: 0;
    color: #000;
}

a:link {
    color: #FF0004;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #DC7F81;
}
a:hover {
    text-decoration: none;
    color: #FD5F61;
}
a:active {
    text-decoration: none;
}

.infolink:hover{ color:#ff1e00;opacity:0.7; filter: alpha(opacity=75);}

/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
    width: 960px;
    background: #FFF;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
    background:url(images/body_bg.jpg);
    padding: 0px;
        }

/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/

.content {

    padding: 10px 0;
}

/* ~~ This controls the border above/below the iframe ~~ */
.frame
{
    border: 3px red;
border-style: solid none;
}

.dropdown
{
    float: left
    margin-right: 8px;
    margin-top: 10px;
    padding-top: 20px;
}

.logo
{
    float: left
    margin-right: 8px;
    margin-top: 5px;
    }
/* ~~ The footer ~~ */
.footer {
        background:url(images/body_bg.jpg);
                        }

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 20px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
-->
</style>
<script type="text/javascript">
            function setIframeSource() {
                var theSelect = document.getElementById('location');
                var theIframe = document.getElementById('preview-frame');
                var theUrl;
                
                theUrl = theSelect.options[theSelect.selectedIndex].value;
                theIframe.src = theUrl;
            }
        </script>
              <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <style>
       #preview-frame {width: 100%;background-color: #fff;}</style>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script>
         var calcHeight = function() {
           $('#preview-frame').height($(window).height());
         }

         $(document).ready(function() {
           calcHeight();
         }); 

         $(window).resize(function() {
           calcHeight();
         }).load(function() {
           calcHeight();
         });
      </script>
</head>

<body>
<div class="container">
  <div class="header">
    <div class="wrapper">
        <div class="fltlft"><img src="images/easyadminlogo.png" width="180" height="57" margin="30px" padding-top="10px" alt="Easy Admin"/></div>
        <div class="dropdown">
        <form id="form1" name="form1" method="post" action="">
<label>


<select name="location" id="location" onchange="setIframeSource()">
<option value="https://saviodesigns.com/EasyAdmin/">Select a Module...</option>
<optgroup label="Your Site's Modules:">
<option value="../admin_cms/">PowerCMS</option>
<option value="../webadmin/">Gallery Manager Pro</option>
<optgroup label="Your Hosting Account:">
<option value="https://login.ionos.com/" target="_blank">IONOS Hosting</option>
</optgroup>
</select>
</label>
        <span class="fltrt"><a href="https://saviodesigns.com/support.php" target="_blank" class="infolink"><img src="images/getsupport.png" border="0" style="padding-right: 15px; padding-bottom: 19px" /></a></span>
        
       
        
</form> <div class="clearfloat"></div></div> 
         
     </div>
      </div>
       </div>      

     <!-- end .header --> 
<div class="frame" align="center" >
<iframe id="preview-frame" src="https://saviodesigns.com/EasyAdmin/" frameborder="0" noresize="noresize" scrolling="yes"></iframe>
    <!-- end .content --></div>
  
</body>
</html>

我在选项值中尝试了一些不同的东西target ="_blank"，但我认为js需要调整，我不确定如何指定一些选项将是iframe，其他选项将在新标签页中打开页面。

JavaScript

来源：https://stackoverflow.com/questions/76510807/combining-iframe-and-target-blank-options-in-a-drop-down

1条答案

按热度按时间

lbsnaicq1#

要在新标签页中打开链接，您需要进行一些更改。
1.更新**setIframeSource（）函数，检查所选选项是外部链接还是模块链接。如果是外部链接，使用window.open（）**在新标签页中打开。
1.修改下拉列表中外部链接选项的值，以包含target="_blank"属性。
下面是更新后的代码

<!DOCTYPE html>
<html>

<head>
  <title>Easy Admin</title>
  <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />

  <style type="text/css">
    body {
      font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
      background: url(images/body_bg.jpg);
      margin: 0;
      padding: 0;
      color: #000;
    }

    a:link {
      color: #FF0004;
      text-decoration: none;
    }

    a:visited {
      text-decoration: none;
      color: #DC7F81;
    }

    a:hover {
      text-decoration: none;
      color: #FD5F61;
    }

    a:active {
      text-decoration: none;
    }

    .infolink:hover {
      color: #ff1e00;
      opacity: 0.7;
      filter: alpha(opacity=75);
    }

    /* ~~ this fixed width container surrounds the other divs ~~ */
    .container {
      width: 960px;
      background: #FFF;
      margin: 0 auto;
      /* the auto value on the sides, coupled with the width, centers the layout */
    }

    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
      background: url(images/body_bg.jpg);
      padding: 0px;
    }

    /* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/
    .content {
      padding: 10px 0;
    }

    /* ~~ This controls the border above/below the iframe ~~ */
    .frame {
      border: 3px red;
      border-style: solid none;
    }

    .dropdown {
      float: left margin-right: 8px;
      margin-top: 10px;
      padding-top: 20px;
    }

    .logo {
      float: left margin-right: 8px;
      margin-top: 5px;
    }

    /* ~~ The footer ~~ */
    .footer {
      background: url(images/body_bg.jpg);
    }

    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {
      /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
      float: right;
      margin-left: 8px;
    }

    .fltlft {
      /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
      float: left;
      margin-right: 20px;
    }

    .clearfloat {
      /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
      clear: both;
      height: 0;
      font-size: 1px;
      line-height: 0px;
    }

    /* Add your CSS styles here */
  </style>

  <script type="text/javascript">
    function setIframeSource() {
      var theSelect = document.getElementById('location');
      var theIframe = document.getElementById('preview-frame');
      var theUrl = theSelect.options[theSelect.selectedIndex].value;
      if (theUrl.startsWith('http') || theUrl.startsWith('https')) {
        window.open(theUrl, '_blank');
      } else {
        theIframe.src = theUrl;
      }
    }
  </script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <style>
    #preview-frame {
      width: 100%;
      background-color: #fff;
    }
  </style>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
    var calcHeight = function() {
      $('#preview-frame').height($(window).height());
    }
    $(document).ready(function() {
      calcHeight();
    });
    $(window).resize(function() {
      calcHeight();
    }).load(function() {
      calcHeight();
    });
  </script>
</head>

<body>
  <div class="container">
    <div class="header">
      <div class="wrapper">
        <div class="fltlft">
          <img src="images/easyadminlogo.png" width="180" height="57" margin="30px" padding-top="10px" alt="Easy Admin" />
        </div>
        <div class="dropdown">
          <form id="form1" name="form1" method="post" action="">
            <label>
              <select name="location" id="location" onchange="setIframeSource()">
                <option value="https://saviodesigns.com/EasyAdmin/">Select a Module...</option>
                <optgroup label="Your Site's Modules:">
                  <option value="https://stackoverflow.com/">PowerCMS</option>
                  <option value="https://www.youtube.com/">Gallery Manager Pro</option>
                </optgroup>
                <optgroup label="Your Hosting Account:">
                  <option value="https://login.ionos.com/" target="_blank">IONOS Hosting</option>
                </optgroup>
              </select>
            </label>
            <span class="fltrt">
              <a href="https://saviodesigns.com/support.php" target="_blank" class="infolink">
                <img src="images/getsupport.png" border="0" style="padding-right: 15px; padding-bottom: 19px" />
              </a>
            </span>
          </form>
          <div class="clearfloat"></div>
        </div>
      </div>
    </div>

    <div class="frame" align="center">
      <iframe id="preview-frame" src="https://saviodesigns.com/EasyAdmin/" frameborder="0" noresize="noresize" scrolling="yes"></iframe>
    </div>
  </div>

</body>

</html>

例如，我已经将Power CMS选项和Gallery manager pro中的选项值更改为Stackoverflow和youtube。
希望这能解决你的问题。

赞(0）回复(0）举报 2023-06-20

我来回答

javascript 在下拉菜单中组合iFrame和target_blank选项

1条答案

相关问题

热门标签

最新问答