Конфликтующие два скрипта в заголовке HTML (Brython и iFlyChat) - PullRequest
Новая
       18

Конфликтующие два скрипта в заголовке HTML (Brython и iFlyChat)

6 голосов
/ 29 мая 2020

Я загружаю Brython и iFlyChat, но Brython не будет работать, если сценарий iFlyChat не закомментирован. Я пробовал всевозможные комбинации asyn c, но, похоже, есть что-то более фундаментальное.

JSFiddle здесь и код ниже:

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 Ответ

1 голос
/ 12 июня 2020

То, что вы делаете, это то, что вы используете здесь два языка для запуска скриптов: 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>

https://jsfiddle.net/td0xpqLz/2/

...