无法在Jquery的iframe中选择元素?

时间:2018-08-17 18:44:25

标签: javascript jquery

从该线程Selecting an element in iFrame jQuery的引用来看,我认为我在iframe .toolbar中选择类#iframe_toolbar的方法正确,但是它根本没有选择任何元素。

strict_toolbar_top.html

$(document).ready(function(){

  console.log($('#iframe_toolbar').contents().find('ul.toolbar'));

  $(document).on('scroll',function(){
	var top = $(window).scrollTop();

	$('#iframe_toolbar').contents().find('ul.toolbar').css({
	  'margin-top':top,
	})
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="height: 900px;">
<iframe id='iframe_toolbar' src="toolbar.html" frameborder="0" width="100%" height="800px"></iframe>
</div>

toolbar.html

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
}

li {
	float: left;
}

li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

li a:hover:not(.active) {
	background-color: #111;
}

.active {
	background-color: #4CAF50;
}
<ul class="toolbar" style="position: fixed;width:100%;">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
<div class="content" style="height: 30px;">

</div>

console.log($('#iframe_toolbar').contents().find('ul.toolbar'));返回一个空对象,如下所示:

enter image description here

我的jquery脚本出了什么问题?

0 个答案:

没有答案