Question

在我写过的第一个网页和飞镖代码中querySelector按预期工作。我刚刚在同一个项目中创建了一个库，当第一个脚本创建该类的实例并对其进行初始化时，该类会显示第二个网页（这将是一种菜单）。

页面会显示，但querySelector会为子null返回<div id="text-box"> </div>，但不会返回其父级<div id="main-box">之后的第一个元素<body>。我已经使用Google搜索并查看了API，并找到了对ShadowRoot的引用，但未能使用它。我试过链接querySelector，但没有快乐。

如何访问元素中的元素？

HTML（简化）

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tools Menu</title>
    <link rel='stylesheet' type="text/css" media="screen" href='toolsmenu.css'>
  </head>

  <body>   
    <div id="main-box">      
      <div id="text-box"> </div>
    </div>

    <script type='application/dart' src="ToolsMenu.dart"></script>
    <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

用于调试的dart脚本

library ToolsMenu;

import 'dart:html';

class ToolsMenu {
  WindowBase windowBase;
  DivElement mainbox;
  DivElement comments = null;

  void initialize() {
    windowBase = window.open("toolsmenu.html", "_newtab");

    //comments = querySelector('#main-box'); // not null
   comments = querySelector('#text-box');    // FAILS
   // debug
   if(comments == null) {   // always null
     windowBase.close();
     return;
    }
   comments.text = 'It Worked!!'; // never reached.          

  }        
}

Answer 1

querySelector仅搜索当前窗口中的文档。另一个窗口是另一个Dart应用程序。您需要在那里加载Dart脚本，然后这两个应用程序可以使用postMessage和onMessage.listen进行通信。这里有一些关于如何做的相关问题。

无法使querySelector与子节点

1 个答案: