如何在 HTML 中单击按钮时更改 iframe 源？答案

【问题标题】：How do I change my iframe source on button click in HTML?如何在 HTML 中单击按钮时更改 iframe 源？
【发布时间】：2020-11-12 13:32:46
【问题描述】：

我是 HTML 新手，并且一直在逆向工程代码以满足我自己为我的工作开发更新的内部网站的需要。

目前我的代码链接到不同的 .htm 页面，这些页面模拟在同一页面上。显然，如果我需要添加或更改文档，这完全太繁琐而无法更改。

我知道我可以更改 iframe 的源，但我看到的每个解决方案都不适用于我。我太缺乏经验了，我什至不知道从哪里开始。我已经尝试过 onclick 功能，但它只是破坏了我的按钮，除此之外什么也没做。

感谢任何帮助。

这是我当前的代码：

<!DOCTYPE html>
<!---Version: 2.x FOUNDATION--->
<html>
<head>
 <title align="center">MainPage</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown {
    top: 7px;
    position: center;
    display: inline-block;
}
.dropdown-menu {
    background-color: white;
    color: black;
    padding: 12px;
    font-size: 14px;
    border: none;
    left: -100%;
}
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
.navbar {
  background-color: #C0C0C0;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  border-bottom: 0px;
}
/* Links inside the navbar */
.navbar a {
  float: left;
  position: center;
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* Main content */
.main {
  margin-top: 59px; /* Add a top margin to avoid content overlay */
}
iframe {
    display: block;
    border-style:none;
}
</style>
</head>
<body>
<!---Creates a Navbar at the top of the screen. Will scroll with site if content of the "Main" section is long enough.--->
<div class="navbar">
    <a href="mainPage.htm"> <p align="center" style="font-size:100%;"><b>Main Page</b></p></a> <!---Creates a "button" that links to the main page.--->
    <div class="dropdown"> <!---The start of the buttons and drop down menus inside the Navbar.--->
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">On Air</a>
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="button1.htm">Example1</a></li>

        <li class="dropdown-submenu"><!---Creates a submenu inside of the parent menu.--->
        <a class= "test" tabindex="-1" href="#">Weather<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a tabindex"-1" href="submenuButton1.htm">Example 2</a><li>

<div class="main"> <!---Creates the Main section of the page that the navabar sits over.--->
<p align="center">Welcome to the new and improved sampleURL.</p>

<!---Creates an iframe that displays the sampleURL.--->
<p align="center"><iframe name="mainframe" width="100%" height="770" src="sampleURL.htm?wmode=transparent" frameborder="0" allowfullscreen wmode="transparent"></iframe></p>


</div>

 </a>
 
 <script><!---A script that allows the submenu functions to work properly.--->
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

【问题讨论】：

标签： html jquery iframe

【解决方案1】：

为每个改变 iframe 的标签设置一个自定义类，如下所示：

<a class="iframe-change" tabindex"-1" href="submenuButton1.htm">Example 2</a>

现在，用这个 javascript 脚本捕捉点击事件：

$(".iframe-change").on("click", function(event) {
 event.preventDefault(); // Prevents the <a> event
 $("[name=mainframe]").attr("src", $(this).attr("href")); // Changes the iframe "src" property to the url setted in the clicked <a>
});

【讨论】：

非常感谢！这非常有效。我应该知道 javascript 会是解决方案。