Question

我正在努力与复杂的页面选择一些元素。主要的是我需要读取/更改输入上的某些值的表单。到目前为止，我已成功使用此代码进行表单：

var mainFrame = $(frames[1].document.body).contents().find("#mainFrame1");

好的，所以我试试：

$(mainFrame.contents());

并返回空[] ...如果我尝试

$(mainFrame[0].contents());

我收到错误：mainFrame [0] .contents不是函数...

但是使用纯JS：

mainFrame[0].contentDocument.getElementById("dataForm");

作品！我想把它保存到jQuery中，我需要在同一个框架中找到更多的元素，所以我需要mainFrame变量来搜索所有这些元素......

尝试帮助下面的答案找到一个完整的解决方案我发布了mainFrame变量的console.debug：

console.debug(mainFrame);
[frame#mainFrame, prevObject: b.fn.b.init[7], context: frameset#outerFrameSet, selector: "#mainFrame"]
0: frame#mainFrame
    accessKey: ""
    attributes: NamedNodeMap
    baseURI: "https://edited"
    childElementCount: 0
    childNodes: NodeList[0]
    children: HTMLCollection[0]
    classList: DOMTokenList[0]
    className: ""
    clientHeight: 369
    clientLeft: 0
    clientTop: 0
    clientWidth: 1150
    contentDocument: document
                             ->body
                                   ->children (here I can see the form I'm trying to select)
    contentEditable: "inherit"
    contentWindow: Window
    dataset: DOMStringMap
    dir: ""
    draggable: false
    firstChild: null
    firstElementChild: null
    frameBorder: "0"
    hidden: false
    id: "mainFrame"
    innerHTML: ""
    innerText: ""
    isContentEditable: false
    ...
    outerHTML: "<body ..."
    continues...

Answer 1

$(mainFrame.contents());有效，因为mainFrame是一个jQuery对象。 jQuery方法只能应用于jQuery对象。

$(mainFrame[0].contents());产生错误，因为mainFrame[0]从mainFrame jQuery对象返回一个DOM节点。因此，您无法在其上使用$.contents。

要解决此问题，我们可以像这样重写：

$(mainFrame[0]).contents();

这将获取DOM节点并将其转换回jQuery对象，从而允许我们在其上运行$.contents();。现在显然，当尝试将所有这些用作另一个jQuery对象时，这可能会变得混乱：$($(mainFrame[0]).contents());。由于其中一些原因，您使用$.first();之类的方法而不是返回DOM节点的数组。您还有CSS :first-child选择器。

最终，要使用$.contents();，您必须使用jQuery对象，而不是mainFrame[0]返回的DOM节点。您的最终JavaScript版本之所以有效，是因为JS的函数是为了与DOM节点一起构建的，所以jQuery可以处理对象。

content（）在contentDocument工作时返回空

1 个答案: