在 iframe 元素上发生点击事件时，在 Jquery 中加载另一个 html 页面答案

【问题标题】：load another html page in Jquery, when click event happens on iframe element在 iframe 元素上发生点击事件时，在 Jquery 中加载另一个 html 页面
【发布时间】：2017-07-11 07:57:45
【问题描述】：

请原谅我有一个非常基本的问题，因为我仍在使用 Jquery。我正在尝试在单击此 .html 页面中的任何图形元素时加载另一个 .html 页面，但脚本标签未按预期工作任何人都可以帮助以下 js

html代码：

$(document).ready(function(){
	
	$("figure").click(function(){		
		
$(this).load("singlevideo.html"); 
	});	
});

 

* {
 padding:0px;
 margin:0px;
}


body {
   margin:0;
   padding:0;
   height:100%;
}

header {
	  background: green;
  color: white;
  padding: 8px 0px 6px 40px;
  height: 50px;
     
}

.navbar.navbar-inverse.navbar-fixed-top {
  background-color: green; /* fallback color, place your own */
   font-weight: 400;
 color: white;
 text-decoration: none;

}

header h1 {
 display: inline;
 font-family: 'Oswald',sans-serif;
 font-weight: 400;
 font-size: 32px;
 float: left;
 margin-top: 0px;
 margin-right: 10px;
 
 }

nav ul{
  display: inline;
 padding: 0px;
float: left;
}

nav ul li{
 display: inline-block;
 list-style-type:none;
 color: white;
 float: left;
 margin-left: 15px;
 }

nav ul li a{
 color: white;
 text-decoration: none;
 
 }

#nav {
 font-family: 'Montserrat', sans-serif;
 position: fixed;
}

.homered{
 background-color: red;
 padding: 30px 10px 30px 10px;
 
}



.homeblack:hover{
 background-color: blue;
 padding: 30px 10px 30px 10px;
}
div{
 width:250px;
 height:666px;
 background:#1A8DA9;
}
div a{
 text-decoration:none;
 color:white;
 padding:20px;
 padding-right:100px
}
div ul li{
 list-style-type:none;
 display:block;
 padding :15px;
 border-bottom:1px solid #236D7F;
 }
 div ul li :hover{
  background:#4097AD;
  transition:linear all 0.40s;
  margin-left:10px;
 }
 div ul li a:hover{
  color:black;
 }
  #navBar {
   float: left;
   position: fixed;
 }
 
 #nav {
 float: right;
}

#maincontent{
width: 80%;
    height: auto;
    outline: 1px solid;
    position: absolute;
    right: 0;
    background: white;

}



figure {
    display: inline-block;    
}

}
figure figcaption {    
    text-align: center;
}

iframe:focus { 
    outline: none;
}

iframe[seamless] { 
    display: block;
}

.footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:green;
  text-align: center;
}

<!DOCTYPE HTML>
<html lang = "en">
  <head>
  <title>Videos</title>
      <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="videos.css">
  </head>
  <body>
  
 
   <header>
  <nav class="navbar navbar-inverse navbar-fixed-top">
  <h1> Main logo </h1>
   <ul id="nav"> 
    <li><a class="homeblack" href="index.html">Home</a></li>
    <li><a class="homered" href="videos.html">Videos</a></li>
    <li><a class="homeblack" href="news.html">News</a></li>
    <li><a class="homeblack" href="contactus.html">Contactus</a></li>
 </ul>
 </nav>
 </header>

 <div id="navBar">
<ul>
 <li><a href="#">video </a></li>
 <li><a href="#">video </a></li>
 <li><a href="#">video </a></li>
 <li><a href="#">video </a></li>
</ul>
</div>

<div id="maincontent">
<figure  id="1">
  <iframe width="300" height="240" src="https://www.youtube.com/embed/VORxzZazSnc" frameborder="0" allowfullscreen></iframe>
  <figcaption> Trailer </figcaption>
</figure>
<figure id="2">
<iframe width="300" height="240" src="https://www.youtube.com/embed/VORxzZazSnc" frameborder="0" allowfullscreen></iframe> 
  <figcaption> Trailer</figcaption>
</figure>
<figure id="3">
<iframe width="300" height="240" src="https://www.youtube.com/embed/_fL4RuPcDw4" frameborder="0" allowfullscreen></iframe> 
  <figcaption> trailer </figcaption>
</figure>
<figure id="4">
<iframe width="300" height="240" src="https://www.youtube.com/embed/7yxNzMhXSr4" frameborder="0" allowfullscreen></iframe>
  <figcaption> trailer </figcaption>
</figure>
<figure id="5">
<iframe width="300" height="240" src="https://www.youtube.com/embed/ljuBWvzZtyc" frameborder="0" allowfullscreen></iframe> 
  <figcaption> trailer</figcaption>
</figure>
<figure id="6">
<iframe width="300" height="240" src="https://www.youtube.com/embed/2ZBHa9gIOp4" frameborder="0" allowfullscreen></iframe>
  <figcaption>Trailer</figcaption>
</figure>
</div>
<div class="footer">						
<p style="color:white; font-size:20px; font-weight:bold;">Copyright &copy; Education Students</p>
</div>
	<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   
  </body>
</html>

【问题讨论】：

How to redirect to another webpage in JavaScript/jQuery?的可能重复
检查您是否收到click 事件。有可能，您单击 iFrame 并且事件被困在它的 DOM 树中。
@Justinas 这不是问题
Load Content of a div on another page的可能重复
load 函数进行 Ajax 调用以检索页面而不是在浏览器中加载页面。你应该看看第一条评论。

标签： javascript jquery html css

【解决方案1】：

您可以使用.load 函数，不要与load 事件处理程序混淆。

.load() 可用于将数据加载到元素 - 这是一个参考 http://api.jquery.com/load/

这是一个基本的使用示例，代码不像你的，它只是一个模板供你使用:)

html:

<button id="clickMe" type="button">Click Me</button>
<div id="targetLoad"></div>

jQuery:

$('#clickMe').on('click', function()
{
    $('#targetLoad').load('path/to/html.html')
});

这会将 html.html 加载到 id 为 targetLoad 的 div 中。

.on() 函数存在的问题是您使用的是单一世界，而不是类或 id。要定位 id 使用 # 和类使用 .

更新 1

没有完全意识到这是针对 iframe 的——问题在于，因为它是一个动态元素，在技术上不是 DOM 的一部分，因此事件不会触发，或者至少不应该触发。但是您可以使用以下内容来定位动态元素：

$(document).on('click', '.myDynamicElement', function() {})

这会在目标具有 myDynamicElement 类的文档上应用点击操作，这就是您使用动态元素的方式。

不过，要定位您的 iframe，最好使用 .find()，因为 iframe 在某种程度上是它自己的实体。以上可能适用，但我认为这应该有效

var element = $(document).find('.myIframe').find('figure');

$(document).on('click', element, function() {});

更新 2 - 下面 cmets 中来自 OP 的请求

如何使用动态事件处理的示例：

$('body').on('change', '.myDropdown', function()
{
    alert($(this).val())
})

在这种情况下，对具有 .myDropdown 类的输入的每次更改，都会提醒它的当前值。

【讨论】：

我已经像这样更改了 JS，但是当我点击任何 id 元素 $(document).ready(function(){ $("#id").on('click' ,(function(){ $("#singlee").load("C:/Users/rajathkumar_r/Desktop/stack/singlevideo.html"); })); });当点击当前页面中的任何 id 时，我想在另一个页面上显示带有 singlee 的 id。
在它周围放一个console.log，看看它会返回什么——它应该可以工作：S
我正在尝试这样放置，但无法在控制台中看到 $(document).ready(function(){ $("#id").on('click',(function( ){ console.log('#id'); $("#singlee").load("C:/Users/rajathkumar_r/Desktop/stack/singlevideo.html"); })); });
好吧，这很有趣，也许可以在 .on('click') 函数中插入 alert('something') 以查看它是否真的被触发了
它正在工作，但我需要一个点击 iframe 的事件，iframe 位于图形元素 $(document).ready(function(){ $("figure").on(' click',(function(){ alert("clicked.") })); });

【解决方案2】：

您只是将 youtube 视频嵌入到您的框架中，因此 youtube 页面上的点击事件将始终适用于 youtube 的视频功能，并且您的 java 脚本点击事件适用于您页面的名称“预告片”。只需单击名称“预告片”并检查它是否正常工作。

而不是嵌入 youtube 视频，只需拥有视频的预览和 url，并在 url 上有一个点击事件，以按照您的预期将该视频加载到单独的页面上。

【讨论】：

iframe 元素中是否无法获取点击事件
您的点击事件有效。我在回答中提到过。您的 java 脚本单击事件正在处理您页面的名称“Trailer”。只需单击名称“预告片”并检查它是否正常工作。
我知道它正在工作，但我想点击 iframe 上的事件。 iframe 上的 click 事件不起作用，我尝试搜索所有方法，结果发现 click 事件在 iframe 上不起作用，我们需要使用一些不同的方法。我想要实现的是在主要内容 div 中显示很少的视频，当用户点击任何视频时，该视频应该在一个新页面中打开，宽度：1000px；高度：500px；下面我必须把表格发表评论。如何在没有 iframe 的情况下实现它。
你可以使用带有视频标签的 html 表格，而不是 iframe，一旦用户点击它，就可以加载引导模式来加载视频。