Question

Dart <object>元素不支持访问<object>.contentDocument的getter，因此我考虑扩展对象以添加功能。

我看了一下ObjectElement的实现，我基本上需要添加以下几行：

 @DomName('HTMLObjectElement.contentDocument')
 @DocsEditable()
 Document get contentDocument => _blink.BlinkHTMLObjectElement.instance.contentDocument_Getter_(this);

但是，我不知道该怎么做。我目前使用的解决方案是使用代理将所有调用重定向到底层JsObject，但说实话，这不仅仅是脏的，也无法维护。

/ *更新以解释所有邪恶的根源* /

在启动我正在开发的项目时，我想在网站上显示由用户上传的SVG，让用户通过插入额外的SvgElements或删除其他SVG来操作这些SVG。

将SVG作为字符串下载并通过

显示时

container.append(new SvgElement(svgCode))

我得到了非常奇怪的显示错误，使得SVG中的嵌入图像被移位甚至移除，并且其他错误带有掩码。

通过使用<object>标记并将其数据属性设置为SVG的网址来解决问题。 SVG正确呈现。话虽如此，另一个问题出现了。我无法访问和操作SVG DOM，因为它位于<object>标记内，并且使用contentDocument无法访问标记的文档。

考虑到所有这些因素后，只剩下两个选项：

我使用<object>标记没有显示错误但无法操纵SVG或
我从SVG的源代码创建新的SvgElements并将它们附加到DOM，让我操纵SVG但显示错误。

由于显示错误并不是真正的解决方案，我只能使用第一个选项，使用<object>标记并使用Javascript来访问对象的contentDocument。

正如您所看到的，访问contentDocument并不总是一个安全问题而且不允许使用它，只是解决问题的quick and dirty。

当使用JsObject访问contentDocument时，我得到一个JsObject而不是一个Element。因此，我不仅需要在任何地方更新我的代码，而且由于我必须使用带有callMethod(blabla)的JsObject，因此它也非常难看。

Answer 1

class MyObjectElement extends ObjectElement {
  static bool _isRegistered = false;

  static register() {
    if (!_isRegistered) {
      document.registerElement('my-object', MyObjectElement,
          extendsTag: 'object');
      _isRegistered = true;
    }
  }

  factory MyObjectElement() {
    var result = document.createElement('object', 'my-object');
    return result;
  }

  MyObjectElement.created() : super.created();

  js.JsObject get contentDocument {
    // doesn't seem to work with a custom element.
    return new js.JsObject.fromBrowserObject(this)['contentDocument'];
  }
}

像

一样使用它

MyObjectElement.register（）; var obj = new MyObjectElement（） ..data = ＆＃34; https://www.suntico.com/wp-content/uploads/DemoStampRotate01-e1400242575670.png＆＃34 ;; document.body.append（OBJ）;

在Dart

1 个答案: