search

pichillilorenzo / flutter_inappwebview

A Flutter plugin that allows you to add an inline webview, to use a headless webview, and to open an in-app browser window.
https://inappwebview.dev
Apache License 2.0
3.32k stars 1.65k forks source link

"loadData" method can't load html #2331

Open Albert556 opened 1 month ago

Albert556 commented 1 month ago

Is there an existing issue for this?

Current Behavior

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=X3XMexOsUOJrZesU9TFUWjVlWfd51egC"></script>

can't load js script

Expected Behavior

Normal loading

Steps with code example to reproduce

  final html = r"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=X3XMexOsUOJrZesU9TFUWjVlWfd51egC"></script>
    <script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <title>单个逆地址解析</title>
    <style>
        body,html{
           width: 100%;
           height: 100%;
           padding: 0;
           margin: 0;
       }
       #container{
           width: 100%;
           height: 100%;
           overflow: hidden;
       }
       #result{
           position: fixed;
           top: 10px;
           left: 10px;
           padding: 0px 7px;
           min-width: 350px;
           height: 70px;
           line-height: 35px;
           background: #fff;
           box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
           border-radius: 7px;
           z-index: 99;
       }
    </style>
</head>
<body>
    <div id='container'></div>
    <div id='result'>
        点击展示详细的地址：
        <div id='result_l'></div>
    </div>
    <script>
        //实例化地图
        var map = new BMapGL.Map('container');
        map.centerAndZoom(new BMapGL.Point(116.331398,39.897445), 13);
        var geoc = new BMapGL.Geocoder();
        map.addEventListener('click', function(e){
            //清除地图上所有的覆盖物
            map.clearOverlays();
            console.log(e);
            var pt = e.latlng;
            var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
            map.addOverlay(marker);
            geoc.getLocation(pt, function(rs){
                var addComp = rs.addressComponents;
                $('#result_l').text(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
            })
            const args = [pt.lat, pt.lng];
            window.flutter_inappwebview.callHandler('getLatLon', ...args);
        })
    </script>
</body>
</html>
""";
  final baseUrl = WebUri("https://example.com/");

controller.loadData(data: html, baseUrl: baseUrl);

Stacktrace/Logs

log [WindowsInAppWebViewWidget] (windows) WindowsInAppWebViewWidget ID 2419786390880 calling "onWebViewCreated" using [] [WindowsInAppWebViewController] (windows) WebView ID 2419786390880 calling "onUpdateVisitedHistory" using {isReload: false, url: about:blank} [WindowsInAppWebViewController] (windows) WebView ID 2419786390880 calling "onProgressChanged" using {progress: 33} [WindowsInAppWebViewController] (windows) WebView ID 2419786390880 calling "onUpdateVisitedHistory" using {isReload: false, url: about:blank} [WindowsInAppWebViewController] (windows) WebView ID 2419786390880 calling "onTitleChanged" using {title: 单个逆地址解析} [WindowsInAppWebViewController] (windows) WebView ID 2419786390880 calling "onProgressChanged" using {progress: 66} [WindowsInAppWebViewController] (windows) WebView ID 2419786390880 calling "onProgressChanged" using {progress: 100} [WindowsInAppWebViewController] (windows) WebView ID 2419786390880 calling "onLoadStop" using {url: about:blank}

console

Flutter version

v3.24.2

Operating System, Device-specific and/or Tool

Windows 11

Plugin version

v6.1.4

Additional information

No response

Self grab

richanshah commented 1 month ago

I am also facing such issue

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0"><link href="https://www.musictogether.com/familymusiczone/styles/style.css?1728552853" rel="stylesheet" type="text/css" media="all" /><link href="//fonts.googleapis.com/css?family=Cabin:400,700" rel="stylesheet" type="text/css" /><link href="https://www.musictogether.com/familymusiczone/styles/mobile.css?1728552853" rel="stylesheet" type="text/css" media="all" /><script src="https://code.jquery.com/jquery-2.2.1.min.js"></script><script src="https://www.musictogether.com/familymusiczone/scripts/common.js?1728552853" type="text/javascript"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vimeo-player/2.18.0/player.min.js" integrity="sha512-2I2VnRYHrekGEeKKaKHlS2m9kAa/LDPsoJAsIXGD+z+HYhqO7LFvIcijRTmLZsSwBqd+Ojn5VJ4TegZkl1oP5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script src="https://www.musictogether.com/familymusiczone/scripts/mobile2.js?1728552853" type="text/javascript"></script></head><body class="wrapper body-wrapper mobile-embed"><div class="content constrain cf"></div></body></html>

[GETX] Info: _GetImpl Instance of '_GetImpl' runZonedGuarded: MissingPluginException(No implementation found for method loadData on channel com.pichillilorenzo/flutter_inappwebview_1)

Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.19.5, on macOS 14.2.1 23C71 darwin-arm64 (Rosetta), locale en-IN) [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 15.0) [✓] Chrome - develop for the web [✓] Android Studio (version 2023.1) [✓] Connected device 0 iPhone 14 white os 17

@Albert556 any update?

Albert556 commented 1 month ago

It seems that your issue is not this. From the logs, it appears that the corresponding method for the platform method cannot be found, which may indicate a dependency issue where the plugin is not registered.

@richanshah

richanshah commented 1 month ago

but in other collections urls are loading. so this is not the case.

Albert556 commented 1 month ago

After testing, I found the issue: loadData has limited functionality. In my case, //api.map.baidu.com needs a domain to supplement the protocol, and subsequent JS scripts call APIs like cookies, which all require a domain, leading to a series of errors. Although loadData provides a baseUrl, it does not work on Windows. Therefore, I switched to using the loadFile method to load a map.html, but I need to append the protocol to the URL as https://api.map.baidu.com.

Working with local content in WebView2 apps

loadData implements "By navigating to an HTML string," while loadFile implements "By navigating to a file URL." According to the Edge WebView documentation, "By navigating to an HTML string" does not support "Origin-based DOM APIs", whereas "By navigating to a file URL" does support. Can loadData support "By using virtual host name mapping," and can this be understood as baseUrl?

Albert556 commented 1 month ago

but in other collections urls are loading. so this is not the case.

Perhaps it might help to take another look at the error logs to better understand the cause of the issue.

richanshah commented 1 month ago

I attempted to upgrade the dependencies to the latest stable versions of the packages. However, this led to the entire feature ceasing to function without any error logs. I will continue to investigate to see if I can identify any issues.

Currently, I’ve observed that other collections successfully utilize an