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 Tricks

Answer 2

$("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);

像这样......

Answer 3

将其添加到<iframe> - elememt：

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

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

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

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

3 个答案: