在iframe中只显示一个div（javascript，JQuery ......）

Question

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

我有和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>

Answer 1

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

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

通过CSS技巧

Answer 2

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

请注意，此操作仅适用于从同一域加载的iframe（ 相同的原始策略 ）

编辑 ：可能这也删除了loginInnerBox子loginInnerBox 。 在这种情况下，你可以尝试克隆它：

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

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

这样的东西......

Answer 3

将其添加到<iframe> -elememt：

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

除了＃ctl00_CLPMainContent_Login1之外，它会隐藏身体的每个孩子

如果＃ctl00_CLPMainContent_Login1包含的不仅仅是loginbox，则必须使用pex发布的clone（）建议。