logo标签列表

仅在iframe中显示一个div（JavaScript，JQuery...）

javascriptjqueryiframehtml
12

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

我有一个这样的 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 load 的其他页面的后端处理。
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 外的内容呢？ - Pekka
抱歉。我想让iframe内部的其余内容消失。我希望iframe外部的内容保持不变。 - kralco626
这将取决于加载在 iframe 内部的页面标记，如何实现，请展示页面标记。 - Dr.Molle
我发布了一个总体布局，如果您愿意，我可以发布整个页面... - kralco626
3个回答
5
通过jQuery，您不仅可以加载URL的内容，还可以从该URL中的特定CSS选择器加载内容。这将是一种更清晰的方法。就像这样。
$("#area").load("something.html #content");

通过 CSS Tricks 了解更多

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

请注意，这仅适用于从同一域名加载的iframe（同源策略）。 编辑：可能会删除loginInnerBox的子元素。在这种情况下，您可以尝试先克隆它。
var iframe   = $("iframe").contents(),
    loginBox = iframe.find("#loginInnerBox").clone();

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

Something like that..

它什么也没做。只是像以前一样在 iframe 中显示整个页面。 - kralco626
嗯...试试看能否从iframe内容中删除任何东西。如果remove在iframes上不起作用，你可以切换到$(el).hide()吗？ - pex
如果不使用 $("iframe").contents()，无法访问 iframe 中的元素。尝试为您的 iframe 设置一个 id，并通过 $("#iframe_id").contents() 访问它。 - pex
无论是$('#loginiframe').contents().hide();还是$('#loginiframe').contents().remove();都没有任何作用。 - kralco626
1
重要的是要说，在访问内容之前，必须触发iframe的load事件。 - Dr.Molle
显示剩余2条评论
-1
将以下内容添加到<iframe>元素中：
onload="$('body>*',this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();"

它将隐藏除 #ctl00_CLPMainContent_Login1 之外的 body 的所有子元素。

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

如果登录框内有div，我应该使用克隆吗？当我在iframe中使用克隆时，当点击按钮时会执行相同的服务器端代码吗？ - kralco626
JavaScript 不关心服务器端代码，反之亦然，服务器也不会关心 JavaScript。 - Dr.Molle
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接