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”页面上的id =“header”的div中加载一些结果......但是它没有。

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”的脚本，并将其结果发布在索引页面上id =“header”的div中。

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

任何想法，我做错了什么？

Answer 1

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

window.opener.$("#header")

how to access parent window object using jquery?

Answer 2

最后得到它：

我改变了这样的jquery来访问父窗口：

＆＃13;

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

＆＃13;

感谢Digitaldouble的想法

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

2 个答案: