Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrating IFrameElement to HTMLIFrameElement #193

Closed
Kuhlemann opened this issue Feb 29, 2024 · 1 comment
Closed

Migrating IFrameElement to HTMLIFrameElement #193

Kuhlemann opened this issue Feb 29, 2024 · 1 comment

Comments

@Kuhlemann
Copy link

I am trying to switch from 'dart:html' to 'package:web/web.dart' and ran into a problem migrating IFrameElement to HTMLIFrameElement.

My use-case is to visualize HTML-Code in a Flutter Web-App.

The following code compiles, but runs into an error when opening the View:
The following JSNoSuchMethodError was thrown building Builder(dirty):
TypeError: Illegal constructor

The line "web.HTMLIFrameElement iframeElement = web.HTMLIFrameElement()" seems to be the problem.
With "IFrameElement" (outcommented line) everything works fine.

// import 'dart:html';
import 'package:web/web.dart' as web;
import 'package:flutter/material.dart';
import 'dart:ui_web' as ui_web;
import 'package:business_app/features/news/models/news_model.dart';

class HTMLTextView extends StatelessWidget {
  final NewsModel news;

  HTMLTextView({super.key, required this.news}) {
    String viewId = news.content ?? '';

    // IFrameElement iframeElement = IFrameElement()
    web.HTMLIFrameElement iframeElement = web.HTMLIFrameElement()
      ..style.border = 'none'
      ..style.width = '100%'
      ..style.height = '100%'
      ..srcdoc = """
          <html lang="DE">
          <head>
          <title>${news.title}</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>body { margin: 0; padding: 0; }</style>
          </head>
          <body>
            ${news.content ?? ''}
          </body>
          </html>
        """
      ..allowFullscreen = true;

    // Das IFrameElement der Flutter-App UI hinzufügen.
    // Hierfür wird die 'dart:ui' Plattformansicht genutzt.
    ui_web.platformViewRegistry.registerViewFactory(
      viewId,
      (int _) => iframeElement,
    );
  }

  @override
  Widget build(BuildContext context) {
    String viewId = news.content ?? '';

    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text(news.title),
        ),
        body: HtmlElementView(viewType: viewId));
  }
}

Versions:
Flutter 3.19.2 • channel stable
Dart 3.3.0 • DevTools 2.31.1
web 0.4.2 (web 0.5.0 incompatible with dependency constraints)
@srujzs
Copy link
Contributor

srujzs commented Feb 29, 2024 •
edited
Loading

These external constructors on Elements were accidentally emitted because the IDL exposes them for custom element support. They don't work as you would expect. I just landed #185 which should expose some constructors (and remove those other, incorrect constructors) that will make it easier to create these elements but that will be in the next version release.

For your package version, document.createElement is the right API here e.g. document.createElement('iframe') as HTMLIFrameElement. Use that to get an HTMLIFrameElement instead. Sorry for the confusion.

@srujzs srujzs closed this as completed Feb 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Kuhlemann @srujzs