使用 jquery 从 iframe 加载 div 中的内容

Question

我的 "index.php" 页面中有一个下拉列表菜单，可以在 iframe 中加载另一个页面（取决于选择），如下所示：

<head>
<script language="javascript">

function setPic(elem) {
     var image = document.getElementById('canvas');
     image.src = elem.value; 
  
}
</script>
</head>
<body>

<div id="header">
loading area
</div>


<div id="content">
  <form>
    <select onchange="setPic(this);">
      <option value="/network/page_elements/lvl1.php" >lvl1</option>
      <option value="/network/page_elements/lvl2.php" >lvl2</option>
      <option value="/network/page_elements/lvl3.php" >lvl3</option>
      <option value="/network/page_elements/lvl4.php" >lvl4</option>
    </select>
</form>


<iframe src="/network/page_elements/lvl1.php" id="canvas"></iframe>

</div>
</body>

所以我正在 iframe 中加载例如页面 "lvl1.php"。此 "lvl1.php" 页面包含如下按钮：

<form method="post">
  <input type="button" value="1" id="A1" />
</form>

按下此按钮时，它会执行 jquery 代码，该代码应在 "index.php" 页面上的 div 中加载一些 id="header" 的结果。 .wich 它没有。

jquery 看起来像这样：

$(document).ready(function() {
 
  
    $('#header').load('network/page_elements/header.php');
 
 $('input').click(function() {
  
  var page=$(this).attr('id');
  
  $('#header').load('network/buttons/' + page + '.php');
  });
  
  return false;
});

所以在这个例子中，当按下按钮时，它应该执行一个名为 "A1.php" 和 post 的脚本，其结果在索引页面上的 div 和 id="header" 中。

如果我将按钮代码放在 "index.php" 页面上，它可以正常工作...但如果在 iframe 内的加载页面上按下它，它什么也不做。

知道我做错了什么吗？

Answer 1

您必须访问父 window 的 DOM，因为 javascript 在框架内执行

window.opener.$("#header")

how to access parent window object using jquery?

Answer 2

终于搞定了：

我像这样更改了 jquery 以访问父级 window:

$("#header",window.parent.document).load('/network/buttons/' + page + '.php');

感谢 Digitaldouble 的创意

使用 jquery 从 iframe 加载 div 中的内容

loading content in a div from iframe with jquery

jquery

html

iframe

load

external