flutter web :How to find iframeElement to replace it's src - flutter

Question

I have a flutter project that i added web support to it. Now in my page i have 2 button.I want to when user clicked on each button, a web page shown.So in order to i create custom widget :
#override
Widget build(BuildContext context) {
print("url is ------> ${url}");
isAddedElement();
_iframeElement.height = double.maxFinite.toString();
_iframeElement.width = double.maxFinite.toString();
_iframeElement.src = url;
_iframeElement.style.border = 'none';
_iframeElement.id = 'iframe';
ui.platformViewRegistry.registerViewFactory(
'iframeElement',
(int viewId) => _iframeElement,
);
_iframeWidget = HtmlElementView(
// key: UniqueKey(),
viewType: 'iframeElement',
);
return SizedBox(
height: 600,
width: 600,
child: _iframeWidget,
);
}
inisAddedElement method i want to check iframeElement.id = 'iframe' is exist or not?If exist i want to change src with the new web page:
bool isAddedElement() {
IFrameElement frame = document.querySelector('iframe');
if (frame != null) frame.src = url;
}
but document.querySelector('iframe') always return null?

Answer 1

The query returns null, most likely because flutter adds the HtmlElementView widget inside a shadowDom and these elements are not available directly in the document scope.
In order to access the element you need to go via a shadowroot which is usually placed under custome tag called flutter-platform-view.
So the following approaches may work.
Accessing via flt-platform-view
Try to access the iframe element as shown below.
document.getElementsByTagName('flutter-platform-view')[0].shadowRoot.getElementById('iframe');
Accessing the IframeElement instance
You already have the reference of IframeElement instance and can check what you need with it as shown below.
bool isAddedElement() {
//IFrameElement frame = document.querySelector('iframe');
if (_iframeElement!= null && _iframeElement.src == null) _iframeElement.src = url;
}
However I don't understand why in your code you are calling the isAddedElement() even before setting up the IframeElement.
You can find more details about the why its put behind a shadow dom in this issue in github.
Here is full working demo using the first approach. The live version is available as a codepen demo
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'dart:html';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: IframeDemo(),
),
),
);
}
}
class IframeDemo extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return MyWidget();
}
}
class MyWidget extends State<IframeDemo> {
String _url;
IFrameElement _iframeElement;
#override
initState() {
super.initState();
_url = 'https://en.wikipedia.org/wiki/Twitter';
_iframeElement = IFrameElement()
..src = _url
..id = 'iframe'
..style.border = 'none';
ui.platformViewRegistry.registerViewFactory(
'iframeElement',
(int viewId) => _iframeElement,
);
}
void updateUrl(String page) {
setState(() {
// building a new url
_url = 'https://en.wikipedia.org/wiki/$page';
// Setting the url to the src field of the iframe element.
HtmlElement elem = document.getElementsByTagName('flt-platform-view')[0];
IFrameElement ifrelem = elem.shadowRoot.getElementById('iframe');
ifrelem..src = _url;
});
}
#override
Widget build(BuildContext context) {
print('url is $_url');
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MaterialButton(
color: Colors.blueAccent,
child: Text('Show Twitter wiki'),
onPressed: () {
updateUrl('Twitter');
},
),
SizedBox(
width: 50,
),
MaterialButton(
color: Colors.orangeAccent,
child: Text('Show Facebook Wiki'),
onPressed: () {
updateUrl('Facebook');
},
),
],
),
SizedBox(
height: 100,
),
SizedBox(
height: 600,
width: 600,
child: HtmlElementView(
// key: UniqueKey(),
viewType: 'iframeElement',
),
),
],
);
}
}