Two scripts conflicting in the HTML head (Brython & iFlyChat)

Question

I'm loading Brython and iFlyChat but Brython won't work if the iFlyChat script is uncommented. I've tried all sorts of async combinations but there seems to be something more fundamental.

JSFiddle here and code below:

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>

score 1 · Accepted Answer · answered Jun 11 '20 at 21:21

What you're doing is that you're using two languages here for running scripts, 1. Using Javascript for initializing iFlyChat 2. Python language for input box

Explaining about the scenario when both scripts are enabled:

The onload method which you're using to initialize brython will never be called as there is a race condition between two scripts. Delaying one for sometime solves our problem.

Solved:

<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/

Two scripts conflicting in the HTML head (Brython & iFlyChat)

1 Answers1