[SOLVED] Cannot run External Javascript in Embedded HTML

kprimo · July 15, 2020, 11:42am

Hi, I am a beginner at play canvas. I’m trying to load HTML pages into Play Canvas and execute third-party JavaScript in HTML. I followed the tutorial at HTML/CSS - Live Updates, and have added the external javascript to the scene. However, external Javascript did not work.

Here is my project link. My goal is to embed ECharts in Play Canvas, is there a better way? Can’t the embedded HTML run JS scripts?

Leonidas · July 15, 2020, 11:50am

Hi @kprimo and welcome,

Running your project I can see that the script is both loaded correctly and the echarts global object seems to be available to be used.

How are you booting echarts and getting the error you posted above?

kprimo · July 15, 2020, 12:06pm

thanks for your answer. If you store the echarts code as an HTML, you can see that it is not loaded correctly in the HTML embedded in Play Canvas.

<html>
<head>
    <meta charset="utf-8">
    <title>First ECharts Instance</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
    
        var myChart = echarts.init(document.getElementById('main'));
    
        var option = {
            title: {
                text: 'First ECharts Instance'
            },
            tooltip: {},
            legend: {
                data:['Sales']
            },
            xAxis: {
                data: ["A","B","C","D","E","F"]
            },
            yAxis: {},
            series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
    
        myChart.setOption(option);
        console.log('1');
    </script>
</body>
</html>

Leonidas · July 15, 2020, 12:07pm

Right got it, you can’t run javascript code in the html you are manually appending.

If you copy/paste your JS in the console you will get the rendered chart.

Try putting your code in your html-handler.js script, after the html has loaded and has been added to the DOM:

    asset._onLoad = function(asset) {
        fn.call(self, asset, asset.resource);
        
        // try here
    };

kprimo · July 15, 2020, 12:26pm

actually I add the code after here:

    asset.on('load', asset._onLoad);
    // callback
    fn.call(this, asset, asset.resource);

otherwise, the charts won’t be loaded either. It finally works, thanks for your guide !