Question

我发现在iframe中选择元素并在父页面中执行某些操作非常困难。这是我的代码，它不起作用。

在我的父代码中：

//(JS PART)
var $currentIFrame = $('#screen'); 
   alert($currentIFrame.contents().find("#abc").type);

//(body part)
  <iframe id="screen" name="screen" width="100%" height="100%" src="test.php">

                   </iframe>

在我的iframe文件中：

//(body part)
<input type="text" id="abc" name="abc">

然而，结果是“未定义”而不是“文本”。

Answer 1

您需要使用.attr()：

  alert($currentIFrame.contents().find("#abc").attr('type'));

Answer 2

您需要使用 attr() ：

获取集合中第一个元素的属性值匹配的元素或为每个匹配的元素设置一个或多个属性元件。

alert($currentIFrame.contents().find("#abc").attr('type'));

编辑：如果iframe是不同的域名，则由于 Same-origin policy 而无法访问该内容：

Uncaught SecurityError：无法读取'contentDocument'属性来自'HTMLIFrameElement'：阻止具有原点的帧 “http://fiddle.jshell.net”访问具有原点的框架 “http://www.ebay.com”。协议，域和端口必须匹配。

Answer 3

尝试使用find

var element = $currentIFrame.find("#abc").attr('type'));

Answer 4

你应该注意两个因素：

1 - 帧应该来自同一个域，否则你就能做到没有;
2 - 当你尝试在iframe中获取元素时 - 它必须是已经装好了。

var frame = $( '#frameSelector' ); frame.load( function(){ var element = frame.contents().find( '.selector' ); });

来自父级iframe的选择器元素

4 个答案: