在 iframe 中只显示一个 div (javascript, JQuery ...)答案

【问题标题】：show only one div within an iframe (javascript, JQuery...)在 iframe 中只显示一个 div (javascript, JQuery ...)
【发布时间】：2011-05-04 11:11:15
【问题描述】：

首先让我说我对完全不同的方法持开放态度。

我有这样的 iframe：

<div id="testloadlogin">
      <iframe src="../security/login.aspx" width="400" height="500"
             scrolling="auto" frameborder="1">
      [Your user agent does not support frames or is currently configured
      not to display frames. However, you may visit
      <a href="../security/login.aspx">the related document.</a>]
      </iframe>
</div>

使用 iframe 加载的页面有一个名为 loginInnerBox 的 div。我只想显示 loginInnerBox 和其中的所有内容。

关于如何做到这一点的任何想法？我正在考虑使用 Jquery 或某种类型的 javascript 来删除 iframe 加载的页面上的所有其他内容，但不知道如何访问它...

为了清楚起见，我希望 iframe 之外的页面上的所有内容保持不变。我想要相当于说 $.('testloadlogin').load('../security/login.aspx' #loginInnerBox) ，它只会获取 loginInnerBox 的 html 并将其放在 testloadlogin div 中。但是，我需要 iframe 支持的其他页面的后端处理，但 Jquery 负载不支持。

iframe加载的页面的标记是

<body>
    <div>
    </div>.......
    <div class="AspNet-Login" id="ctl00_CLPMainContent_Login1">
        <div id="loginInnerBox">
            <div id="loginCreds">
                <table>
                </table>
            </div>
        </div>
    </div>
    <div>
    </div>....
</body>

您还需要更多信息吗？

我试过了，没有效果：

<div class="ui-corner-all" id="RefRes">
        <div id="testloadlogin">
        <iframe onload="javascript:loadlogin()" id="loginiframe" src="../security/login.aspx"
             scrolling="auto" frameborder="1">
      [Your user agent does not support frames or is currently configured
      not to display frames. However, you may visit
      <a href="../security/login.aspx">the related document.</a>]
      </iframe>
        </div>
    </div>
    <script type="text/javascript">
        function loadlogin() {
            $('<body>*', this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();
        }
    </script>

【问题讨论】：

我不明白。 “仅显示框”是什么意思？您希望其他内容发生什么？ iframe 之外的内容呢？
对不起。 iframe 内的其余内容我想消失。 iframe 之外的内容我想保持不变。
这取决于iframe中加载的页面的标记，如何做，所以请显示标记。
发布了一个总体布局，如果您愿意，我可以发布 while 页面...

标签： javascript jquery iframe html

【解决方案1】：

$("iframe").contents().find("*:not(#loginInnerBox)").remove();

请注意，这只适用于从同一域 (same origin policy) 加载的 iframe

编辑：可能这也会删除loginInnerBox 的孩子。在这种情况下，您可以尝试在之前克隆它：

var iframe   = $("iframe").contents(),
    loginBox = iframe.find("#loginInnerBox").clone();

iframe.find("*").remove();
iframe.append(loginBox);

类似的东西..

【讨论】：

希望他们来自同一个域。他们现在是，只是希望他们不要改变网站的域。我现在正在测试。
它什么也没做。只是像以前一样在 iframe 中显示整个页面。
嗯.. 试试是否可以从 iframe 内容中删除任何内容。如果 remove 不能在 iframe 上工作，你可能会切换到 $(el).hide()?
我试过了：$('#loginInnerBox').remove();并且它没有删除 iframe 中的 loginInnerBox。 $('#loginInnerBox').hide();还是显示登录框的效果一样。
在访问内容之前必须触发 iframe 的加载事件。

【解决方案2】：

将此添加到<iframe>-elememt：

onload="$('body>*',this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();"

它会隐藏除#ctl00_CLPMainContent_Login1 之外的所有子实体

如果#ctl00_CLPMainContent_Login1 包含的不仅仅是登录框，您必须使用 pex 发布的使用 clone() 的建议。

【讨论】：

所以如果登录框内有重新的 div，我将不得不使用克隆？当我在使用克隆时单击 iframe 中的按钮时，是否会执行与不使用克隆时相同的服务器端代码？
javascript 不关心服务器端代码，另一方面服务器也不关心 javascript。

【解决方案3】：

使用 jQuery，您不仅可以加载 URL 的内容，还可以从该 URL 中加载特定的 CSS 选择器。这将是一种更清洁的方法。就像这样。

$("#area").load("something.html #content");

通过CSS Tricks

【讨论】：