Question

我有一个包含HTML页面的iframe。现在我想获得点击的父项的类。
这是我的ifram：

<iframe src="//example.com" id="frame" ></iframe>

这是css：

#frame{  width:380px;  height:420px;}

这是我的剧本：

$(document).ready(function() {
  var iframe = document.getElementById('frame');
  var innerDoc = iframe.contentDocument || iframe.contentWindow.document.body;
  $(innerDoc).on('click', function(e) {
    var thisID = ((e.target).id);
    alert(thisID);
    alert(innerDoc.getElementById(thisID));


    $(thisID).click(function() {
      var Allclassnames = $(thisID).parent();
      console.log(Allclassnames);
    });
  });
});

但它返回的项目只是点击了。如何修复它？

演示：DEMO

NOTE：它们位于同一个域中。可能因为DEMO而无法正常工作。但我确信我的HTML与我的网站位于同一个域内。谢谢。

Answer 1

将沙箱属性添加到iframe

<iframe src="/example.html" id="frame" sandbox="allow-scripts allow-same-origin"></iframe>

将脚本更改为

<script>
$('#frame').load(function() {
  $('#frame').contents().on('click', function(e) {  
    var thisID = ((e.target).id);
    alert(thisID); 
    alert($('#'+thisID,this));
      $('#'+thisID,this).click(function() {
        var Allclassnames = $(this).parent();
        console.log(Allclassnames); 
      });
  });
});
</script>

确保框架doc中的每个元素。有一些id或者alert（）可能会抛出错误。

要查看iframe的控制台消息，您需要在范围下拉列表中更改范围，除了Chrome开发人员工具中的过滤器图标外，它还位于控制台选项卡中。

Answer 2

您不能与iframe的内容进行互动，除非它与父文档位于同一个域中。

请参阅：
https://en.wikipedia.org/wiki/Same-origin_policy

获取iframe中的clicked标签的父级

2 个答案: