作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在加载 Brython 和 iFlyChat,但如果未注释 iFlyChat 脚本,Brython 将无法工作。我尝试了各种异步组合,但似乎有一些更基本的东西。
JSFiddle here和下面的代码:
https://jsfiddle.net/tutmoses/c09dhbrq/
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<!-- BRYTHON -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.8/brython.js" integrity="sha256-rA89wPrTJJQFWJaZveKW8jpdmC3t5F9rRkPyBjz8G04=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.8/brython_stdlib.js" integrity="sha256-Gnrw9tIjrsXcZSCh/wos5Jrpn0bNVNFJuNJI9d71TDs=" crossorigin="anonymous"></script>
<!-- IFLYCHAT
<script>
console.log("init iflychat plugin");
var iflychat_app_id="1c0d1abc-4864-4608-acb7-6cdbfab07ce2";
var iflychat_external_cdn_host="cdn.iflychat.com",iflychat_bundle=document.createElement("SCRIPT");iflychat_bundle.src="//"+iflychat_external_cdn_host+"/js/iflychat-v2.min.js?app_id="+iflychat_app_id,iflychat_bundle.async="async",document.body.appendChild(iflychat_bundle);var iflychat_popup=document.createElement("DIV");iflychat_popup.className="iflychat-popup",document.body.appendChild(iflychat_popup);
</script> -->
</head>
<body onload="brython()">
<div class="container">
<h2 id="hello"></h2>
<button id="alert-btn">Alert & Insert</button>
<input type="text" id="text" placeholder="Enter something">
<span id="output"></span>
</div>
<!-- Alert & DOM insert -->
<script type="text/python" id="script0">
from browser import document, console, alert
def show(e):
console.log(e)
alert('Hello World')
document['hello'] <= 'Hello World'
document['alert-btn'].bind('click', show)
</script>
<!-- Text bind -->
<script type="text/python" id="script1">
from browser import document
def show_text(e):
document['output'].textContent = e.target.value;
document['text'].bind('input', show_text)
</script>
</body>
</html>
最佳答案
你正在做的是你在这里使用两种语言来运行脚本,
1. 使用Javascript初始化iFlyChat
2.输入框的Python语言
解释启用两个脚本时的场景:onload
用于初始化 brython
的方法永远不会被调用,因为两个脚本之间存在竞争条件。推迟一段时间可以解决我们的问题。
解决了:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<!-- BRYTHON -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.8/brython.js" integrity="sha256-rA89wPrTJJQFWJaZveKW8jpdmC3t5F9rRkPyBjz8G04=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.8/brython_stdlib.js" integrity="sha256-Gnrw9tIjrsXcZSCh/wos5Jrpn0bNVNFJuNJI9d71TDs=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2 id="hello"></h2>
<button id="alert-btn">Alert & Insert</button>
<input type="text" id="text" placeholder="Enter something">
<span id="output"></span>
</div>
<!--Calling it first because it has javascript language and specially mentioned "text/javascript" in type here -->
<!-- IFLYCHAT -->
<script type="text/javascript">
console.log("init iflychat plugin");
var iflychat_app_id="1c0d1abc-4864-4608-acb7-6cdbfab07ce2";
var iflychat_external_cdn_host="cdn.iflychat.com",iflychat_bundle=document.createElement("SCRIPT");iflychat_bundle.src="//"+iflychat_external_cdn_host+"/js/iflychat-v2.min.js?app_id="+iflychat_app_id,document.body.appendChild(iflychat_bundle);var iflychat_popup=document.createElement("DIV");iflychat_popup.className="iflychat-popup",document.body.appendChild(iflychat_popup);
</script>
<!-- now initializing brython with a delay of 10ms-->
<script type="text/javascript">
setTimeout(() => {
console.log("init Brython");
window.brython();
}, 10);
</script>
<!-- Alert & DOM insert -->
<script type="text/python" id="script0">
from browser import document, console, alert
def show(e):
console.log(e)
alert('Hello World')
document['hello'] <= 'Hello World'
document['alert-btn'].bind('click', show)
</script>
<!-- Text bind -->
<script type="text/python" id="script1">
from browser import document
def show_text(e):
document['output'].textContent = e.target.value;
document['text'].bind('input', show_text)
</script>
</body>
</html>
关于javascript - HTML 头部中的两个脚本冲突 (Brython & iFlyChat),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62083257/
我正在加载 Brython 和 iFlyChat,但如果未注释 iFlyChat 脚本,Brython 将无法工作。我尝试了各种异步组合,但似乎有一些更基本的东西。 JSFiddle here和下面的
我是一名优秀的程序员,十分优秀!