How to access frame (not iframe) contents from jQuery

Asked
Active3 hr before
Viewed126 times

8 Answers

access
90%

So how do I access frame elements from the top frame? Am I missing something here?,https://jamesmccaffrey.wordpress.com/2009/07/30/cross-frame-access-with-jquery/, Stack Overflow Public questions & answers ,Thanks for contributing an answer to Stack Overflow!

You could grab the Frame and div you are wanting to manipulate and pass it into a variable.

var statusText = top.frames["treeStatus"].document.getElementById('statusText');

Then you can do anything you want to it through jQuery.

$(statusText).whatever();
load more v
88%

I have 2 frames in one page like this (home.html),and then in one frame (treeStatus.html) I have something like,So how do I access frame elements from the top frame? Am I missing something here?,I have seen several questions like this and they suggest the following

I have 2 frames in one page like this (home.html)

<frameset rows="50%, 50%">
   <frame id="treeContent" src="treeContent.html" />
   <frame id="treeStatus" src="treeStatus.html" />
</frameset>

and then in one frame (treeStatus.html) I have something like

<body style="margin: 0px">
   <div id="statusText">Status bar for Tree</div>
</body>

I have seen several questions like this and they suggest the following

$(document).ready(function() {

   $('#treeStatus').contents().find("#statusText").hide();
});

Here is some output from firebug console

>>> $('#treeStatus')[frame #treeStatus] >>>
   $('#treeStatus').contents()[] >>>
   $('#treeStatus').children()[]

After combining both answers here, the correct way is

$('#statusText', top.frames["treeStatus"].document).hide();

For this to work the frame must have the name attribute apart from the id, like this:

<frameset rows="50%, 50%">
   <frame id="treeContent" src="treeContent.html" />
   <frame name="treeStatus" id="treeStatus" src="treeStatus.html" />
</frameset>
load more v
72%

Description: Get the children of each element in the set of matched elements, including text and comment nodes.,The .contents() method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.,This code first retrieves the contents of <div class="container"> and then filters it for text nodes, which are wrapped in paragraph tags. This is accomplished by testing the .nodeType property of the element. This DOM property holds a numeric code indicating the node's type; text nodes use the code 3. The contents are again filtered, this time for <br /> elements, and these elements are removed.,We can employ the .contents() method to help convert this blob of text into three well-formed paragraphs:

<div class="container"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br><br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
load more v
65%

Most developers will probably be able to tell you about how much they dislike working with iFrames. The content within the iFrames can't be accessed with CSS, so if the frame doesn't work with your site's design, if the sizing is off, if you'd like to change the positioning of the content...you're mostly out of luck, unless you have access to the server that hosts whatever is being embedded with the frame and it isn't a problem to change the source material. However, it's also possible to use a really simple jQuery to access the elements within the iFrame. Check it out below:

$(document).ready(function() {
   var iFrameDOM = $("iframe#frameID").contents();

   iFrameDOM.find(".page").css("background-color", "#fff");
});
75%

I have 2 frames in one page like this (home.html),and then in one frame (treeStatus.html) I have something like,I have seen several questions like this and they suggest the following,For this to work the frame must have the name attribute apart from the id, like this:

I have 2 frames in one page like this (home.html)

<frameset rows="50%, 50%">
   <frame id="treeContent" src="treeContent.html" />
   <frame id="treeStatus" src="treeStatus.html" />
</frameset>

and then in one frame (treeStatus.html) I have something like

<body style="margin: 0px">
   <div id="statusText">Status bar for Tree</div>
</body>

I have seen several questions like this and they suggest the following

$(document).ready(function() {

   $('#treeStatus').contents().find("#statusText").hide();
});

Here is some output from firebug console

>>> $('#treeStatus')[frame #treeStatus] >>>
   $('#treeStatus').contents()[] >>>
   $('#treeStatus').children()[]

After combining both answers here, the correct way is

$('#statusText', top.frames["treeStatus"].document).hide();

For this to work the frame must have the name attribute apart from the id, like this:

<frameset rows="50%, 50%">
   <frame id="treeContent" src="treeContent.html" />
   <frame name="treeStatus" id="treeStatus" src="treeStatus.html" />
</frameset>
load more v
40%

Oh, this is an only an issue when using the file protocol?,Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "http://example.com". The frame requesting access has a protocol of "file", the frame being accessed has a protocol of "http". Protocols must match.,Successfully merging a pull request may close this issue.,IMO, an error should be thrown (even though I see no error in FF 45.0.1 on mac), making what we do with it insubstantial.

<div class="iframes-inaccessible" id="iframes-inaccessible-target">
    <script>
        var target = document.getElementById("iframes-inaccessible-target");
        var iframe = document.createElement("iframe");
        iframe.src = "http://example.com/";
        target.appendChild(iframe);
    </script>
</div>
<script src="../vendor/jquery/dist/jquery.min.js"></script>
<script>
    $(function() {
        $("div iframe").on("load", function(){
            console.log($(this).contents());
        });
    });
</script>
load more v
22%

Search Answer Titles

$('#ifrm').attr('src', "http://www.google.com")
60%

getIframeContent(frameId): It is used to get the object reference of an iframe.,contentWindow: It is a property which returns the window object of the iframe.,contentWindow.document: It returns the document object of iframe window.,contentWindow.document.body.innerHTML: It returns the HTML content of iframe body.

Code snippet:

function getIframeContent(frameId) {
   var frameObj =
      document.getElementById(frameId);

   var frameContent = frameObj.
   contentWindow.document.body.innerHTML;

   alert("frame content : " + frameContent);
}
load more v

Other "access-undefined" queries related to "How to access frame (not iframe) contents from jQuery"