godotengine/godot-docs
1
0
Fork 0
mirror of https://github.com/godotengine/godot-docs.git synced 2026-01-04 14:11:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

[Web] Expand "Interacting with Javascript"

Browse Source 
Document the new (preferred) interface.

Add a small section about downloading files to the user device.

(cherry picked from commit 712aa0c345)
This commit is contained in:
Fabio Alessandrelli
2024-02-17 00:17:06 +01:00
committed by Max Hilbrunner
parent 6b53c69def
commit a8ad17dd10
5 changed files with 334 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
tutorials/export/exporting_for_web.rst
View File

@@ -284,109 +284,10 @@ supported on your web server for further file size savings.
be used. Instead, you should use an established web server such as Apache or
nginx.
.. _doc_javascript_eval:
Interacting with the browser and JavaScript
-------------------------------------------
Calling JavaScript from script
------------------------------
In web builds, the ``JavaScriptBridge`` singleton is implemented. It offers a single
method called ``eval`` that works similarly to the JavaScript function of the
same name. It takes a string as an argument and executes it as JavaScript code.
This allows interacting with the browser in ways not possible with script
languages integrated into Godot.
.. tabs::
.. code-tab:: gdscript
func my_func():
JavaScriptBridge.eval("alert('Calling JavaScript per GDScript!');")
.. code-tab:: csharp
private void MyFunc()
{
JavaScriptBridge.Eval("alert('Calling JavaScript per C#!');")
}
The value of the last JavaScript statement is converted to a GDScript value and
returned by ``eval()`` under certain circumstances:
* JavaScript ``number`` is returned as :ref:`class_float`
* JavaScript ``boolean`` is returned as :ref:`class_bool`
* JavaScript ``string`` is returned as :ref:`class_String`
* JavaScript ``ArrayBuffer``, ``TypedArray`` and ``DataView`` are returned as :ref:`PackedByteArray<class_PackedByteArray>`
.. tabs::
.. code-tab:: gdscript
func my_func2():
var js_return = JavaScriptBridge.eval("var myNumber = 1; myNumber + 2;")
print(js_return) # prints '3.0'
.. code-tab:: csharp
private void MyFunc2()
{
var jsReturn = JavaScriptBridge.Eval("var myNumber = 1; myNumber + 2;");
GD.Print(jsReturn); // prints '3.0'
}
Any other JavaScript value is returned as ``null``.
HTML5 export templates may be :ref:`built <doc_compiling_for_web>` without
support for the singleton to improve security. With such templates, and on
platforms other than HTML5, calling ``JavaScriptBridge.eval`` will also return
``null``. The availability of the singleton can be checked with the
``web`` :ref:`feature tag <doc_feature_tags>`:
.. tabs::
.. code-tab:: gdscript
func my_func3():
if OS.has_feature('web'):
JavaScriptBridge.eval("""
console.log('The JavaScriptBridge singleton is available')
""")
else:
print("The JavaScriptBridge singleton is NOT available")
.. code-tab:: csharp
private void MyFunc3()
{
if (OS.HasFeature("web"))
{
JavaScriptBridge.Eval("console.log('The JavaScriptBridge singleton is available')");
}
else
{
GD.Print("The JavaScriptBridge singleton is NOT available");
}
}
.. tip:: GDScript's multi-line strings, surrounded by 3 quotes ``"""`` as in
``my_func3()`` above, are useful to keep JavaScript code readable.
The ``eval`` method also accepts a second, optional Boolean argument, which
specifies whether to execute the code in the global execution context,
defaulting to ``false`` to prevent polluting the global namespace:
.. tabs::
.. code-tab:: gdscript
func my_func4():
# execute in global execution context,
# thus adding a new JavaScript global variable `SomeGlobal`
JavaScriptBridge.eval("var SomeGlobal = {};", true)
.. code-tab:: csharp
private void MyFunc4()
{
// execute in global execution context,
// thus adding a new JavaScript global variable `SomeGlobal`
JavaScriptBridge.Eval("var SomeGlobal = {};", true);
}
See the :ref:`dedicated page <doc_web_javascript_bridge>` on how to interact with JavaScript and access some unique Web browser features.
Environment variables
---------------------

2
tutorials/export/feature_tags.rst
View File

@@ -132,7 +132,7 @@ Here is a list of most feature tags in Godot. Keep in mind they are **case-sensi
exported to HTML5 on a mobile device.
To check whether a project exported to HTML5 is running on a mobile device,
:ref:`call JavaScript code <doc_javascript_eval>` that reads the browser's
:ref:`call JavaScript code <doc_web_javascript_bridge>` that reads the browser's
user agent.
Custom features