.NET MAUI Blazor Hybrid (.NET 7) Twitter Timeline Embed not engaged on iPhone iOS

By
Channel969
-
0
144


I’m attempting to load a Twitter timeline embed script on a NET MAUI Blazor Hybrid web page utilizing the generated script from Twitter Publish. It seems to be engaged on Android emulator, however not engaged on native iOS system. After I strive loading the app on my native iOS system the Twitter timeline embed hundreds in exterior Safari browser and app errors.

App Information:

  • NET MAUI Blazor Hybrid
  • NET 7
  • iPhone 11 Professional
  • iOS Model 16.0.3

Beneath is my code I’m testing:

index.html – Added the twitter script reference right here (proper earlier than closing physique tag).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta identify="viewport" content material="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cowl" />
    <title>MauiBlazorTwitterTest</title>
    <base href="/" />
    <hyperlink rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <hyperlink href="css/app.css" rel="stylesheet" />
    <hyperlink href="MauiBlazorTwitterTest.kinds.css" rel="stylesheet" />
</head>

<physique>

    <div class="status-bar-safe-area"></div>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a category="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js" autostart="false"></script>
    <!-- Twitter Widget -->
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</physique>

</html>

index.razor – Name to my TwitterComponent.

@web page "/"

<h1>Hi there, world!</h1>

<TwitterComponent DataTweetLimit="2"></TwitterComponent>

TwitterComponent.razor – Twitter part with JSInterop. Notice: DataTweetLimit is not actually getting used on this instance however would ultimately go to the mark-up string to restrict variety of tweets.

@utilizing Microsoft.JSInterop

@((MarkupString)"<a category="twitter-timeline" href="https://twitter.com/dotnet?ref_src=twsrcpercent5Etfw" data-tweet-limit="2" data-chrome="noheader nofooter">Tweets by TwitterDev</a>")

@code {

    [Inject]
    public IJSRuntime JSRuntime { get; set; }

    [Parameter]
    public string DataTweetLimit { get; set; }

    protected override async Job OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("twttr.widgets.load");
        }
    }
}

Android emulator – Seems to load with none points:

enter image description here

iOS Native Gadget – Twitter timeline doesn’t load in app on native iOS system. NOTE: The unhandled error solely seems to happen first time the app is loaded. You possibly can reload the app and don’t get error notification, however each time you load the house web page (index.razor) the embeded Twitter timeline open in a brand new Safari browser and doesn’t load within the app.

enter image description here