在iframe中找到一个元素，并在Wordpress中通过Jquery或js将其隐藏

Question

<div id="check1">
<iframe src="xxxx" id="testIframe">
   <div>
      <div>
        ...
         <img class="centered-image" ... >
        ...
      </div>
   </div>
</iframe>

目标html结构在Wordpress中，然后如何检查它的存在并通过jquery或js隐藏iframe？下面的代码不起作用。如果目标元素不存在，我想隐式地处理它。

jQuery(document).ready(function(){
    if($(this).hasClass("centered-image").length == 0) {
        $(this).contents().find("#finn-api").hide();
    }
});

已修改： 我得到的答案如下。

jQuery(document).ready(function( $ ) {
    if($("#check1").contents().find(".centered-image").length == 0) {
        $('#finn-api').hide();
    }
});

Answer 1

问题1：您正在使用iFrame，并且jQuery是在父屏幕中编写的

  

您正在做的事情要遵守原产地政策   （https://en.wikipedia.org/wiki/Same-origin_policy）。这应该是   您为何获得权限拒绝类型错误。

问题2：您可能不使用document.ready函数，因为它可能仍会在其中加载iframe的内容。您需要使用button或setInterval()之类的额外元素来检查iframe

中的内容

不过，您可以使用以下代码执行此操作：

function checkImage(){

	if($("#iFrame1").contents().find("#someDiv img").hasClass("centered-image"))
	{
		$("#iFrame1").hide();
	}
}

<iframe id="iFrame1" height="100%" width="100%" style="min-height:300px;border:none" src="ddl__School.html"></iframe>

<button onclick="checkImage()">Check class in side iFrame</button>

您的iframe文件html代码为：

<div>
	<div id="someDiv">
		...
		<img class="centered-image" src="https://picsum.photos/200/200/?random">
		...
	</div>
</div>

使用开发者工具栏检查课程是否正在申请。