Downloadable content in Javascript

Question

<div class="center"data-role="content" id="content"  >
        <a href="#flappy" data-transition="slide" >Don't Be A Terrorist</a>
        </div>



    <div id="flappy" >
    <center>
    <div id="page">
            <div data-role="header">
            <h1 style="color: white; font-size: 20px;">Don't Be A Terrorist</h1>
            <a data-icon="home" data-rel="back" style="margin-top:2px; background-color: white;">....</a>
        </div>

        <div id="frame" onload="check2()">
        <script>
        function check2(){
        $.get(/flappy.html)
    .done(function() { 
    alert("you have it");
                <p style="color: white; margin-top: 30px;">Dont't be a terrorist is a game where you must manoeuvre a plane through buildings. Be careful not to hit one or be labelled a terrorist. <br> Controls:<br>Hold the screen down, to go up <br> Let go, to go down <br> Don't hit buildings or die</p>
        <a href="flappy.html" data-transition="pop" rel="external"><img src="images/play.png" width="320px" height="320px"></img></a>

    }).fail(function() { 
    alert("Download it now!");
    })
    }
    </script>
    enter code here
        </div>
        </div>
        </center>
    </div>

Here is my code for a games website, if the file exist it should be an option to play the game, but if it doesn't a button where they can choose to download it. This is my code I have gathered! I would rather not use ajax if that is possible! Thank you so much!

Thank you! :)

What is your question? Are you asking how to make a download button? — rp.beltran, Jun 10 '14 at 01:56
The script isn't checking whetherthe file exists or not, secondly how would I add a download button :) Thank you @user2403741 — Jinan Dangor, Jun 10 '14 at 01:59
Not sure about your the first part of that, but to make a download button, you can use my answer on this question: http://stackoverflow.com/questions/24112849/how-to-download-html-code-of-the-current-page/24112886#24112886 (the download code is the same just change the file names) — rp.beltran, Jun 10 '14 at 02:05

hutchbat · Answer 1 · 2014-06-10T02:14:33.077

The onload event can only be used on the document(body) itself, frames, images, and scripts.

if the file exist it should be an option to play the game, but if it doesn't a button where they can choose to download it.

You can check if the file exists using jQuery.ajax success & error methods:

$(document).ready(function(){
    $.ajax({
        url:'path/to/game.html',
        type:'HEAD',
        success: function() {
            alert('Game exists, add some code.')
        },
        error: function() {
            alert('Download Game !')
        }
    })
})

You can also use Plain Javascript to check if the file exists

function gameExists(url) {
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

if(gameExists('path/to/game.html')) {
    alert('Game exists, add some code.');
} else {
    alert('Download Game !');
}

If you don't want to use ajax you can use PHP then insert a javascript variable in the code.

<script type="text/javascript">
    var gameExists = <?php echo file_exists($fileName) ? true : false;?>
</script>

If you need to append any HTML to the frame container you can use jQuery Append()

$('#frame').append('<a href="#/download">Download</a>');

score 0 · Answer 2 · edited May 23 '17 at 12:05

Not quite sure what you mean by:

if the file exist it should be an option to play the game, but if it doesn't a button where they can choose to download it.

What are they going to be downloading if there is no file to download? Regardless, you can force a download in browsers that support the download attribute of link elements. Currently I believe this only works in chrome and maybe firefox.

As described in this answer,

var myLink = document.createElement('a');
myLink.href = 'path_to_file_you_want_to_give_them.extension';
myLink.download = 'whatever_you_want_to_call_the_file_that_they_get.extension';
document.body.appendChild(link);
link.click();

Basically this creates a link with the download path to the file you want to give them, allows you to name their download, appends the link to the dom, and uses jQuery's click function to force a click event on the element.

Downloadable content in Javascript

2 Answers2