javascript - 通过单击带有嵌套 div 的 div 加载 iframe

Question

我有一组带有嵌套项目的 div

<div id="second-item" class="dock-item">
  <div class="website-name">Facebook.com</div>
  <div class="website-screenshot"><img src="fb-thumb.png" /></div>
  <div class="page-name">Facebook</div>
</div>
    <div id="third-item" class="dock-item">
  <div class="website-name">Mozilla.com</div>
  <div class="website-screenshot"><img src="uwdt-thumb.jpg" /></div>
  <div class="page-name">Mozilla</div>
</div>

我有一个 iframe #frame1

<iframe id="frame1"></iframe>   

当用户点击父级 #second-item div 时，我需要 iframe #frame1 来加载 facebook.com

当用户单击父级 #third-item div 时，我需要 iframe #frame1 来加载 mozilla.com

我该怎么做？

我尝试在 div #second-item 和 #third-item 中添加以下 onclick 但它不起作用:

'onclick="frames['frame1'].location.href=' http://sitename.com '"'

Answer 1

条条大路通罗马(这里只有两条路!)。

<!-- points on first frame-->
<div id="second-item" class="dock-item" onclick="window.frames[0].location.href='http://facebook.com'">
  <div class="website-name">Facebook.com</div>
  <div class="website-screenshot"><img src="fb-thumb.png" /></div>
  <div class="page-name">Facebook</div>
</div>
<!-- points on name -->
<div id="third-item" class="dock-item" onclick="window.frames['frame1'].location.href='http://mozilla.com'">
  <div class="website-name">Mozilla.com</div>
  <div class="website-screenshot"><img src="uwdt-thumb.jpg" /></div>
  <div class="page-name">Mozilla</div>
</div>
<iframe id="frame1" name="frame1"></iframe>

更好的解决方案:

<!-- points on id -->
<div id="fourth-item" class="dock-item" onclick="document.getElementById('frame1').src='http://www.phpclasses.org';return false;">
  <div class="website-name">phpclasses.org</div>
  <div class="website-screenshot"><img src="uwdt-thumb.jpg" /></div>
  <div class="page-name">PhpClasses</div>
</div>