如何获取 iframe 中存在的 div 对象答案

【问题标题】：How to get object of a div present inside a iframe如何获取 iframe 中存在的 div 对象
【发布时间】：2013-06-27 09:50:34
【问题描述】：

我有 2 个 html 文件和一个 IFrame 。

结构是，

我可以得到outside.html 和iframe 的对象。但我无法获得inside.html 的对象。

我的 inside.html 将是，

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/chat.css">
<title>Heart JSP page</title>

</head>
<body>

    <div id="messageArea" class="divBorder">

     Chat Interaction id is : Some value.

    </div>
    <div id="enterMessage" class="divBorder">
    Your message Area
    </div>
</body>
</html>

我的javascript 是

if($("#chatMessageArea").length){

    alert("outside.html Object is present !");

    if($("#ch"+intxnId).length){

        alert("IFrame Object is present !");

        if($("#ch"+intxnId).contents().find("#messageArea").length){
            alert("inside.html Object is present !");
        }else{
            alert("inside.html Object is not available !");
        }

    }else{
        alert("IFrame Object is not available !");
    }
}
else{
    alert("outside.html Object is not available  !");
}

注意：

#chatMessageArea - outside.html的一个div的id

#chintxid - iframe 的 ID

#messageArea - inside.html中一个div的id

谁能帮忙获取inside.html的对象。

【问题讨论】：

您是否测试过$("#ch"+intxnId).contents() 是否返回任何值？通过控制台日志记录警报。
@Jeffrey 是的。我已经检查了 if if($("#ch"+intxnId).contents()){ alert("contents present"); }else{ alert("No contents present"); } 。我在警报中收到了contents present。
实际尝试alerting 或控制台记录内容。也许你得到了一些东西，但它实际上并没有被填满。

标签： javascript jquery dom iframe

【解决方案1】：

试试这个：

var ifr = document.getElementById('chintxid');
ifr.contentDocument.getElementById('messageArea').innerHTML = "reached!";

您需要先获取 iFrame id，然后在其中获取您需要的内容。让我知道这是不是你要找的..

【讨论】：

感谢您的回复。我收到 contentDocument is null or not an object 错误。
你能在 iFrame 中回显document.getElementById('messageArea'); 吗？
那么问题似乎出在 iFrame 内部。您可以发布 html 或实时链接吗？
感谢您的回复。请查看我更新的问题。我使用的是JSP 而不是HTML 页面。
frame.contentDocument 并不总是有效。试试 frame.contentWindow.document（如果你使用 Internet Explorer，我想）

【解决方案2】：

使用此辅助函数获取 iframe 的文档

getFrameContentDocument = function(frame) {
   var doc = frame.contentDocument || frame.contentWindow.document;
   return doc;
};

那么代码就是

var iframe = document.getElementById("ch" + intxid);
var iframeDoc = getFrameContentDocument(iframe);
// You can now get elements in this iframe 
var messageArea = iframeDoc.getElementById("messageArea");

【讨论】：

添加了风筝播放器的轻微修改，不知道如何批准您的修改抱歉：/

【解决方案3】：

解决办法，

if($("#chatMessageArea").length){

    alert("chatMessageArea Object is present !");

    if($("#ch"+intxnId).length){

        if($("#ch"+intxnId).contents().find('body').find("#messageArea").length){

            alert("messageArea Object is present !");
        }else{
            alert("messageArea Object is not available !");
        }
    }else{
        alert("IFrame Object is not available !");
    }
}
else{
    alert("chatMessageArea Object  not available  !");
}

【讨论】：