web-dev-qa-db-ja.com

エラー：jQueryにはドキュメントのあるウィンドウが必要です

そのため、npm updateを実行するまですべてがうまく機能し、今までどおりに機能しなくなりました。

ちょっとした背景：私のコードでは、jqueryを使用してテキスト形式のhtmlを解析します。私はウィンドウを使用せず、jsdomも使用しません。以前は、これを行うためにうまく機能していました。

$ = require("jquery"); 
$(html).find("<h1>").html("The title");

しかし、今私はこれを取得します：jQueryにはドキュメントを含むウィンドウが必要です

どうすれば修正できますか？

jquerynode.js
44
Martin

1行のnode.js-jQuery定義：

// definition
var $ = require('jquery')(require("jsdom").jsdom().parentWindow);

// usage
$("body").append("<div>TEST</div>");
console.log($("body").html());
34
Michael

JQueryのnpmパッケージにはjsdomが含まれていたため、Nodeでまったく機能しません。jQueryには何らかのDOM環境が必要です。

_npm install [email protected]_を実行することで、以前のバージョンで使用されていたことを確認できます。 jsdomがインストールされているのがわかります。何らかの理由で、彼らは最近のリリースからjsdomを削除したようです。理由はわかりません。

ただし、jsdom 7.xを使用してjQueryコードを実行するのは簡単です。

_var jsdom = require("jsdom");
var window = jsdom.jsdom().defaultView;

jsdom.jQueryify(window, "http://code.jquery.com/jquery.js", function () {
  var $ = window.$;
  $("body").prepend("<h1>The title</h1>");
  console.log($("h1").html());
});
_

パスはjQueryの別のバージョンまたはローカルファイルに変更できます。

注：3.xシリーズを含むjsdomの以前のバージョンでは、var window = jsdom.jsdom().parentWindow;の代わりにvar window = jsdom.jsdom().defaultView;行が必要です。 4.xは、parentWindowが機能しなくなるようにしました。

15
Louis

これは私のために働いた

var jsdom = require('jsdom');
$ = require('jquery')(new jsdom.JSDOM().window);
11
Aravinthan K

解決しました。最初にjsdomとjqueryを削除してから、npmにjsdom jqueryをインストールする必要がありました。

それからこれ：

var jsdom = require("jsdom"); 
$ = require("jquery")(jsdom.jsdom().createWindow());

私が最新バージョンを持っていることが重要だったことがわかりました。それ以外の場合は機能しませんでした。

9
Martin

jsdomには新しいバージョンがあるようです。したがって、現在は少し異なる方法で動作します。以下に例を示します。

const { JSDOM } = require("jsdom");
const myJSDom = new JSDOM (html);
const $ = require('jquery')(myJSDom.window);

これで、jQueryで使用していたように検索できます。

$("<h1>").html("The title");

npm install jqueryのように、jqueryをすべて小文字で記述する必要があるため、jQueryのインストールに注意してください。

4
Hola Soy Edu Feliz Navidad

（2018）-新しいjsdom API

var jsdom = require('jsdom'),
    { JSDOM } = jsdom,
    jsdom_options = {
      runScripts: "dangerously",
      resources: "usable"
    };

// external script example:
var DOM = new JSDOM(`<!DOCTYPE html><html><head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script></head><body></body></html>`, jsdom_options);

// local script example:
var jQuery = fs.readFileSync("../../jQuery.js", { encoding: "utf-8" });
var DOM = new JSDOM(``, { runScripts: "dangerously" });

var scriptElm = window.document.createElement("script");
scriptElm.textContent = jQuery;
DOM.window.document.head.appendChild(scriptElm);

参照：

  1. 外部スクリプトのロード
  2. ローカルスクリプトの読み込み
4
vsync

package.jsonのこれらのバージョン設定で次を試すことができます。

"jquery": "^2.1.1",
"jsdom": "^1.0.0-pre.3"

page.htmというファイルがあるとします：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Html page</h1>
    <div class="left">
        <p>left content</p>
    </div>
</body>
</html>

次に、ファイルから読み取り、JSDOMを使用してDOMとウィンドウを作成し、jqueryに渡すことができます。

var jsdom = require("jsdom").jsdom;
var fs = require('fs');
fs.readFile('page.htm', {encoding: "utf8"}, function (err, markup) {
  if (err) throw err;
  var doc = jsdom(markup);
  var window = doc.parentWindow;
  var $ = require('jquery')(window)
  var outerLeft = $(".left").clone().wrap('<div></div>').parent().html();
  var innerLeft = $(".left").html();
  console.log(outerLeft, "and ...", innerLeft);
});

出力されます：

<div class="left">
<p>left content</p>
</div> and ... 
<p>left content</p>
3
AJ Meyghani

これをjQueryを使用してHTMLテキストのレンダリングを支援するNode.js（サーバー）ファイルの上部に配置しました...

var jsdom = require("jsdom").jsdom;
jsdom.env({
    html : "<html><body></body></html>",
    done : function(errs, window) {
        global.window = window;
    }
});

そしてすべてがバラになります。

3
Mark Peterson

ウィンドウオブジェクトを提供する必要があります。これを行うには、jsdomからparentWindowを渡します。

var jsdom = require("jsdom"); 
var $ = require("jquery")(jsdom.jsdom().parentWindow);
0
neoRiley

私はここで正しい年ではないことを知っていますが、より良い方法を見つけたかもしれません。 .htmlファイルからスクリプトを呼び出すと、スクリプトはドキュメントを認識し、問題を解決しました（少なくとも今のところ）。例：

index.html：

<html>
<head>
<meta charset="UTF-8">
<!--Scripts-->
<script>
    window.$ = window.jQuery = require('../js/libs/jQuery.js');
</script>
<script src="../js/libs/materialize.js"></script>
<script>
    const init = require("../js/initialize/initialize.js");
    init.initializer.main_init();
</script>

<!--Styles-->
<!--Libraries-->
<link rel="stylesheet" href="../scss/libs/materialize.css" />
</head>
</html>

initialize.js：

var jQuery = require('jquery');

(function($, global, undefined) {
    "use strict";

    var Initialize = function() {
        var initializer;          
        initializer = {
            materialize_init: function () {
            console.log(document.getElementsByClassName("tooltipped"));
            },

            main_initialize: function () {
                this.materialize_init();
            }
        };

        return {
            main_init: function () {
                initializer.main_initialize();
                return this;
            }
        };
    };

    // AMD and window support
    if (typeof define === "function") {
        define([], function () { return new Initialize(); });
    } else if (typeof global.initializer === "undefined") {
        global.initializer = new Initialize();
    }

})(jQuery, this);

間違っているかどうかを教えてください、私は今日このフレームワークで作業を始めました。

0
KorelK