Template:EmbedLiveSample

<%
// Embeds a live sample given the ID of its header block.
//
// Parameters:
//  $0 - The ID of the header block containing the sample
//  $1 - The width of the iframe (optional)
//  $2 - The height of the iframe (optional)
//  $3 - The url of a screenshot of the sample working as intended (optional)
//  $4 - The slug from which to load the sample (optional; current page used if not provided)
//
// See also : LiveSampleLink
 
var str = "";
var sampleUrl = "";

if ($4) {
    sampleUrl = "https://developer.mozilla.org/" + env.locale + "/docs";
    if ($4.charAt(0) != "/") {
        sampleUrl += "/";
    }
    sampleUrl += $4;
}

sampleUrl = Web.spacesToUnderscores(sampleUrl);
 
var widthHeight = "";
if ($1) {
    widthHeight = "width='" + $1 + "' ";
}
if ($2) {
    widthHeight += "height='" + $2 + "' ";
}

var liveSample = '<iframe class="live-sample-frame sample-code-frame" id="frame_'+ $0 +'" frameborder="0" ' + widthHeight + 'src="' + template('LiveSampleURL', [$0, sampleUrl]) + '"></iframe>';
if ($3 && ($3.length > 0)) {
    str += '<table class="sample-code-table"><thead><tr>';
    str += '<th scope="col" style="text-align: center;">Screenshot</th>';
    str += '<th scope="col" style="text-align: center;">Live sample</th>';
    str += '</tr></thead><tbody><tr>';
    str += '<td><img alt="" class="internal" src="' + $3 + '" /></td>';
    str += '<td>' + liveSample + '</td>';
    str += '</tr></tbody></table>';
} else {
    str += liveSample;
}
%>
<%- str %>
Search for pages that use Template:EmbedLiveSample to see example use cases and how many pages use this macro.

Document Tags and Contributors

Contributors to this page: Sheppy, DavidWalsh, ziyunfei, Jeremie, trevorh, madarche, lmorchard
Last updated by: Sheppy,