Using TypeScript with Flutter's WebView

Is it possible to run TypeScript in the Flutter WebView? I need to run TypeScript while loading a website in the WebView in my flutter app. Currently, I am encountering an issue with running videos during the load, so I am looking to manually trigger video playback from the app.

  WebView(
    initialUrl: privacyUrl,
    javascriptMode: JavascriptMode.unrestricted,
    gestureNavigationEnabled: false,
    debuggingEnabled: true,
    onWebViewCreated: (controller) {
      webController = controller;
    },
    onPageFinished: (url) {
      // A piece of JavaScript code taken from the webpage that requires an equivalent TypeScript method.
      webController.runJavascriptReturningResult(
          "javascript:(function() { document.getElementById('spot-video').play(); })()");
    },
  ),
javascriptandroidtypescriptflutterwebview

Answer №1

It is vital to remember that TypeScript must be compiled into JavaScript in order to run properly on the web. Even though TypeScript targets like the web exist, attempting to execute TypeScript code directly without first compiling it to JavaScript will result in failure. Websites and browsers are designed to understand JavaScript, not TypeScript.

In your particular situation, the optimal solution would be to write your TypeScript code in a separate project, verify its functionality, compile it to JavaScript, and then utilize it within your runJavascriptReturningResult method.

Additionally, given that runJavascriptReturningResult expects a String, there may be a possibility of utilizing a third-party TypeScript compiler for this purpose.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transferring query parameters to a new page using the POST method in a Node JS and Express application

I'm experiencing an issue where I need to pass the same id through multiple consecutive web pages using query parameters. While transferring the param with GET routes works fine, I encounter a problem on the third page which has a short form and uses ...

javascriptnode.jsexpressweb-applications

What is the best way to implement Angular 2 slash routes in conjunction with Node Express?

I have defined some routes in my App component: @routeConfig([ { path:'login', name: 'Login', component: Login }} Additionally, I have a basic node express loader set up: var express = require('express'); var ...

javascriptexpressangular

How can you include a comma between two objects within a string, excluding the last object, using JavaScript?

I have a string object stored in a variable passed from another class. My question is how can I add a comma between two objects, excluding the last object? Below is my code snippet: { "id":"57e4d12e53a5a", "body":"asdas", "publishe ...

javascriptjsonparsingobject

Preserving variable values across page transitions in Angular 2

I am facing an issue with my multi-page website that uses a router. I want to pass a variable value from one page to another. Here is the code snippet from my contact form page: testName:string = "hello"; ngOnInit() { this.dataService.Stream ...

angulartypescriptrxjs

Adding javascript code to HTML using Express

Currently, I am in the process of building a web application utilizing the Express framework to create Impress.js presentations and implementing a visual editor for them. I have configured the app.js to only fetch the .html file, but my objective is to inc ...

javascripthtmlexpressimpress.js

The marker on the Three JS globe is constantly visible inside the globe or positioned far outside its boundaries

As a beginner in programming and React three fiber, I am struggling to understand why the marker I place on the globe using geolocation data won't stay attached. Despite my attempts to convert latitude and longitude to Cartesian coordinates, the marke ...

javascriptthree.jsgeolocationreact-three-fiber

What are the steps for creating a rectangular container and placing an object within it?

Is there a way to display both the box and object inside the box using three.js? I attempted to achieve this by creating a cubeGeometry: var cubeMaterials = new THREE.LineBasicMaterial({wireframe:true,wireframeLinewidth:8,} ); var cubeGeometry = new THRE ...

javascriptthree.js

sql error: column does not exist in android database

When trying to retrieve a record based on item_name, I encounter a SQL exception stating that the column Roti does not exist. Here's the query in my code: db.query(TABLE_1, new String[] { KEY_ITEM_CALORIES }, KEY_ITEM_NAME + "=" + item_name, null, nu ...

androidandroid-sqlite

"From transitioning from a regular class to a functional component in React Native, navigating through the

I am a beginner in react native and I am struggling to convert class components into functional components. I have tried various ways to pass refs in the functional component and used hooks to manage state, but unfortunately, I haven't been successful ...

javascriptiosreactjsreact-nativereact-hooks

Creating a properly formatted PHP array to be passed to JavaScript

Following code snippet works successfully: $db = $connection->messages; $collection = $db->messagesCollection; $messageArray = $collection->find(array('IDto' => '4')); foreach($messageArray as $messageData){ $messageFro ...

phpjavascriptjqueryjsonmongodb

What is the solution for this problem in TypeScript involving an API service call?

Trying to utilize the API Service to fetch data and display the response as an object created by a class constructor Currently executing a Typescript code that interacts with the API Service import * as request from "request"; import { Users } from "./Us ...

typescript

Deactivate the button when an item is selected from the dropdown menu in JavaScript

I am working on a dropdown menu containing values that link to functions, along with a textbox and submit button. My goal is to have the submit button disabled or hidden when a specific value is selected from the dropdown, possibly alongside clearing the c ...

javascripthtml

Unable to load AngularJS thumbnails from JSON file? Learn how to showcase a larger image by clicking on the thumbnail

Working with AngularJS to retrieve image data from a JSON file has been successful for me. My next task involves loading all of the thumbnail images into the gallery div and populating the src, alt, and title attributes using ng-repeat. However, this part ...

javascripthtmlangularjsjson

Guide to reordering elements (radio buttons) retrieved by jQuery selector

I am working with a table containing radio buttons. Through a jQuery collection, like c = $('input[name=mybuttons]'), the elements are accessed by rows, so that c[0] corresponds to the top left cell. Is there a way to change this order? For exa ...

javascriptjqueryhtml

Update the date to the following day of the week

Using firebase, I am developing an Android application. Within the app, I have integrated a DatePicker allowing users to select the day of the week, hour, and minutes. After selecting a date and hitting submit, I aim to store not the current date or the ...

javaandroiddate

Using json_encode in PHP results in nullification of HTML strings

I am working with an array that includes a string containing HTML tags as one of its elements. As I loop through the array and output the field, I can see the string. $positions = $jobs_dbc->getData($sql); foreach($positions as $position) { ...

javascriptphpjson

Efficient ways to manage dropdown cells in ReactGrid

Is there a way to assign individual values to each select element in a cell? I am using ReactGrid with react version 16 There seems to be an issue with the onchange function, and I'm struggling to find help import * as React from "react"; ...

reactjstypescriptreact-grid-layout

unable to locate the custom npm package within my service

There is a similar inquiry posted here: My custom NPM Package is not found, but unfortunately, the solution provided did not fix my issue. I am encountering an error stating: "Could not find a declaration file for module '@dc_microurb/common' ...

node.jstypescriptnpm

The Query object is not defined in the Express framework

When the postData object is received in the controller as a query, and I log the object, it contains the following data: console.log("data:- ", req.query.postData); The console output is: data:- { "property1":"value1" ...

javascriptnode.jsexpressaxios

Error: An unexpected token < was caught in the TypeScript Express code

Using TypeScript to compile and run an Express server that simply serves an HTML file. However, encountering an error in the response under the network tab in Chrome for app.js: Uncaught SyntaxError: Unexpected token '<' Below is the server c ...

htmlnode.jstypescriptexpress