Jquery.find() is not able to access elements

Question

I am trying to access an element in an iframe and .find() is not able to select any element. If I access .contents[0] I do get the entire document but if I try .find( "*" ) or any other selector it returns an empty object. Both html file are in the same folder.

var iframe_all = $('#iframe_vote').contents().find( "*" )
var iframe_document = $('#iframe_vote').contents()[0]

console.log(iframe_all)
console.log(iframe_document)

Result:

Object { length: 0, prevObject: {…} }

HTMLDocument file:///c:/Users/piero/OneDrive/Documents/Visual%20Studio%202017/Projects/marketPredictions/marketPredictions/vote.html
URL: "file:///c:/Users/piero/OneDrive/Documents/Visual%20Studio%202017/Projects/marketPredictions/marketPredictions/vote.html"
activeElement: <body>
alinkColor: ""
all: HTMLAllCollection { 0: html.no-js, 1: head, 2: meta, … }
anchors: HTMLCollection []
applets: NodeList []
baseURI: "file:///c:/Users/piero/OneDrive/Documents/Visual%20Studio%202017/Projects/marketPredictions/marketPredictions/vote.html"
bgColor: ""
body: <body>
characterSet: "UTF-8"
charset: "UTF-8"

HTML:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="jquery.js"></script>


        <link rel="stylesheet" type="text/css" href="css\vote.css">
    </head>
    <body>


        <a id = 'btnPlus' href="#plus">
            <span class="bg" id="plus"></span>
            <span class="symbol"></span>
          </a>
          <a class="button minus" id = 'btnMinus'href="#minus">
            <span class="bg" id="minus"></span>
            <span class="symbol"></span>
          </a>
          <span class="cancel">
            <a href="#">Clear</a>
          </span>

    </body>
</html>

@TylerFowle No. I can also access the HTMLCollection with .content()[0].all but then anything returned from that is null or undefined. — Pier-Olivier Marquis, Dec 20 '17 at 15:41
try setting `iframe_all` to just the contents (remove the find) and move the `find` to another var — Tyler Fowle, Dec 20 '17 at 15:43
Try to change: `var iframe_all = $('#iframe_vote').contents().find( "*" )` to `var iframe_all = $('#iframe_vote').contents();` as advised before, then `var iframeHTML = $(iframe_all).find( "*" );` — DIEGO CARRASCAL, Dec 20 '17 at 15:47
Try making a barebones demo of the issue, you can post live snippets here — Dominic, Dec 20 '17 at 15:48
@TylerFowle It just seems like the access is blocked. I read that if they are not local it will be blocked for security reasons. Maybe something similar is happening. — Pier-Olivier Marquis, Dec 20 '17 at 15:53
Look at this, maybe it is something similiar: https://stackoverflow.com/a/9393545/1449780 — Przemek Marcinkiewicz, Dec 20 '17 at 15:56

Tyler Fowle · Answer 1 · 2017-12-20T16:02:07.207

1

you will need to setup a server environment to work with iframes, file:/// isnt a valid domain and will cause issues with cross domain validation

remember that both pages need to be hosted on the same domain/server

this is a security measure, here is some more information: https://blog.chromium.org/2008/12/security-in-depth-local-web-pages.html

edited Dec 20 '17 at 16:02

answered Dec 20 '17 at 15:53

Tyler Fowle

549
2
13

Thanks. I will try this. – Pier-Olivier Marquis Dec 20 '17 at 15:55
But remember that both iFrame content and the site need to be in the same domain (server), to as you said match the cross domain validation. – Przemek Marcinkiewicz Dec 20 '17 at 16:01
thanks @PrzemekMarcinkiewicz ive added that reminder to answer – Tyler Fowle Dec 20 '17 at 16:04

Jquery.find() is not able to access elements

1 Answers1