Question

我正在尝试访问iframe中的元素而.find（）无法选择任何元素。如果我访问.contents[0]，我会获得整个文档，但如果我尝试.find( "*" )或任何其他选择器，它将返回一个空对象。两个html文件都在同一个文件夹中。

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

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

结果：

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>

Answer 1

您需要设置服务器环境以使用iframe，file:///不是有效域，并且会导致跨域验证问题

请记住，两个页面都需要托管在同一个域/服务器上

这是一项安全措施，以下是一些更多信息：https://blog.chromium.org/2008/12/security-in-depth-local-web-pages.html

Jquery.find（）无法访问元素

1 个答案: