0

我正在尝试添加一个通过 Transcrypt 从 Python 文件生成的 javascript 文件。

但是，当我将该脚本添加到我的 HTML 文件时，控制台中出现了一些错误，我失败了。

我使用的 Python 文件：try.py

def greet():
    name = document.getElementById("Name").value
    if name == "" or name.length == 0 or name == null:
        document.getElementById("groet").innerHTML = '<p><font color="#ff0000">Hello Anonymous, may I know yor name? Please insert it below:</font></p>'
    else:
        document.getElementById("groet").innerHTML = '<p><font color="#00ff00">Hello, '+name+', thank you for introducing you</font></p>'

在该脚本之后，我运行了命令python3 -m transcrypt -b try.py并自动创建了一个名为“ target ”的文件夹，其中包含一个文件“try.js”。

因此，我编写了一个 HTML 文件，它是一个显示问候消息的基本示例：hello.html

<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="__target__/try.js"></script>
</head>
<title>Insert Text</title>
<body onload=try.greet()>

<h2>Hello Demo Name</h2>

<p>
<div id = "groet">...</div>
</p>
<p>Your Name: <input name="name" type="text" maxlength="80" id="Name" value=""/> [Please enter your name]<br><br>
<button onclick=try.greet()>Refresh the greeting!</button>
</p>
</body>
</html>

我期望当我单击按钮或重新加载文件时，应该放置问候消息。但是，在控制台中我遇到了两个错误：

Uncaught SyntaxError: import declarations may only appear at top level of a module try.js:1:13
Uncaught SyntaxError: missing { before try block hello.html:1:3

那么，小伙伴们有什么问题呢？

[编辑] 在 TJ 的回答之后，我更新了 html 文件如下：

'use strict';import{AssertionError,AttributeError,BaseException,DeprecationWarning,Exception,IndexError,IterableError,KeyError,NotImplementedError,RuntimeWarning,StopIteration,UserWarning,ValueError,Warning,__JsIterator__,__PyIterator__,__Terminal__,__add__,__and__,__call__,__class__,__envir__,__eq__,__floordiv__,__ge__,__get__,__getcm__,__getitem__,__getslice__,__getsm__,__gt__,__i__,__iadd__,__iand__,__idiv__,__ijsmod__,__ilshift__,__imatmul__,__imod__,__imul__,__in__,__init__,__ior__,__ipow__,
__irshift__,__isub__,__ixor__,__jsUsePyNext__,__jsmod__,__k__,__kwargtrans__,__le__,__lshift__,__lt__,__matmul__,__mergefields__,__mergekwargtrans__,__mod__,__mul__,__ne__,__neg__,__nest__,__or__,__pow__,__pragma__,__proxy__,__pyUseJsNext__,__rshift__,__setitem__,__setproperty__,__setslice__,__sort__,__specialattrib__,__sub__,__super__,__t__,__terminal__,__truediv__,__withblock__,__xor__,abs,all,any,assert,bool,bytearray,bytes,callable,chr,copy,deepcopy,delattr,dict,dir,divmod,enumerate,filter,float,
getattr,hasattr,input,int,isinstance,issubclass,len,list,map,max,min,object,ord,pow,print,property,py_TypeError,py_iter,py_metatype,py_next,py_reversed,py_typeof,range,repr,round,set,setattr,sorted,str,sum,tuple,zip}from"./org.transcrypt.__runtime__.js";var __name__="__main__";export var greet=function(){var py_name=document.getElementById("Name").value;if(py_name==""||py_name.length==0||py_name==null)document.getElementById("groet").innerHTML='<p><font color="#ff0000">Hello Anonymous, may I know yor name? Please insert it below:</font></p>';
else document.getElementById("groet").innerHTML='<p><font color="#00ff00">Hello, '+py_name+", thank you for introducing you</font></p>"};

//# sourceMappingURL=hello.map
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module">
      import { greet } from "./hello.js";
      document.getElementById("greetButton").onclick=greet();
    </script>
  </head>
  <title>Insert Text</title>
<body>

<h2>Hello Demo Name</h2>

<p>
<div id = "groet">...</div>
</p>
<p>Your Name: <input name="name" type="text" maxlength="80" id="Name" value=""/> [Please enter your name]<br><br>
<button id="greetButton">Refresh the greeting!</button>
</p>

</body>
</html>

4

2 回答 2

1

import declarations may only appear at top level of a module

很清楚：您没有将脚本作为模块加载，因此您不能使用import. 添加type="module"到script标签。（但请确保您的目标浏览器支持模块——所有现代主要浏览器都支持，但在模块支持不存在之前，您不必返回多个版本。）

missing { before try block

你有

<body onload=try.greet()>

try是 JavaScript 中的关键字，不能用作标识符。您需要为您的try对象使用不同的名称。（我将xtry在这个答案的其余部分使用。）

如果您的代码确实是一个模块，那么即使它是在代码的顶层声明的，您也无法将其xtry用作全局代码，因为模块的顶层范围不是全局范围。您需要导入它才能使用它。这也意味着您不需要script标签，try.js因为import它会这样做。删除onload和您当前的script标签，而是：

<script type="module">
import { xtry } from "__target__/try.js";
xtry.greet();
</script>

在 HTML 被完全解析并且 DOM 被填充之前，它不会运行（因为type="module".

旁注：onload属性处理程序通常不是最佳实践，原因有两个：1. 它们只能使用全局变量，以及 2.load事件发生在页面加载周期的后期，等待所有资源（包括所有图像）加载。有时这就是你想要的，但不是经常。相反，请使用现代事件处理（如果您确实需要在 上连接处理程序load）并使用现代脚本技术（type="module", defer, ...）。

于 2020-12-19T09:44:07.987 回答
0

除了@TJ Crowder 的回答，我将 html 中的脚本更改为：

<script type="module">
  import * as hello from "./__target__/hello.js";
  window.hello = hello;
</script>

正如Transcrypt教程中所解释的那样。

通过这种方式，我可以在按钮单击时调用 Python 函数。

于 2020-12-19T12:22:17.967 回答