时间戳

首页 > 解决方案 > 如何在 HTML 中单击按钮时更改 iframe 源？

html - 如何在 HTML 中单击按钮时更改 iframe 源？

问题描述

我是 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>

标签： htmljqueryiframe

解决方案

为每个更改 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>
});

推荐阅读