Question

我有一个非常简单的代码。我喜欢在我的IFRAMe中隐藏一些DIV。所以我的index.html页面看起来像这样，所以整个想法是隐藏Calendar.aspx页面的顶部和左侧面板。

知道我的代码有什么问题，或者我应该怎么做？

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></<script>

<script type="text/javascript">
$( document ).ready(function() {
$("#leftpanel").hide();
$("#toppanel").hide
});
();
</script>
<iframe height="800px" width="800px"  src="https://domain/Calendar/Calendar%20Color%20Overview.aspx" >
</iframe>

Answer 1

你可以试试这个：

$('#iframeID').load(function(){
    $('#iframeID').contents().find('#leftpanel').hide();
    $('#iframeID').contents().find('#toppanel').hide();
});

或者：

$(document).ready(function(){
    $('#iframeID').contents().find('#leftpanel').hide();
    $('#iframeID').contents().find('#toppanel').hide();
});

如果您想使用不同的域，则无法使用此方法。

Answer 2

document侧重于当前文档，而不是<iframe>。您需要浏览其content并在隐藏它们之前找到它们。

$('iframe').load(function() {
    $('iframe').contents().find('#leftpanel,#toppanel').hide();
});

Answer 3

我通过创建一个隐藏的表单来实现这一点，该表单将数据发布到iframe src然后删除自己的onpageload。留下带有src（未知）的iframe。

我用post将数据发送到url。需要完全控制目标域才能接收请求。没有尝试过GET请求的代码。

//html
<div id='deleteForm'>
<form style='display: none;' class='fakeForm' id='fakeForm' target="target_iframe" action="(iframe url)" method="post">
    //(optional) can send data to iframe src as a post request
    <input type="hidden" name='data' value="data you may want to send"/>
    <input type="submit" style='display: none;'>
</form>
</div>

<iframe id='target_iframe' src=''></iframe>

//js
window.onload = function () {
  var form = document.getElementById("fakeForm");
  form.submit();
  var deleteParent = document.getElementById("deleteForm");
  deleteParent.remove();
}

Answer 4

注意：此演示已在 chrome 88 上进行测试，因此不保证适用于每个浏览器

绝对是的，您可以使用普通 js 隐藏 iframe 元素，而无需为此使用 jquery。
这个函数可以给我们带来魔力

function myFunction() {
  var iframe = document.getElementById("myFrame");
  var elmnt = iframe.contentWindow.document.getElementsByTagName("tagYouWantFromIframe")[position];
  elmnt.style.display = "none";
}

这是我们如何使用它

在文件的 html 页脚中加载脚本
在 iframe、body 标记或 iframe 的父元素上插入 onload="myFunction()"。但如果您直接使用正文或 iframe 标记，我们就完成了。

实际上 请参阅此链接 https://www.w3schools.com/code/tryit.asp?filename=GOYQTYNRBFVH

Answer 5

因为您的脚本有问题您应该在此脚本的最后删除该符号“ <”

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></<script>

应该是这样

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

有没有办法隐藏IFRAME src页面中的元素？

5 个答案: