堆棧內存溢出
  簡體   English   中英

如何在js文件中包含HTML？

[英]How to include HTML in a js file?

 原文  2016-06-29 01:25:28  7   2    javascript/ html/ twitter-bootstrap

問題描述

我使用javascript和bootstrap模態對話框創建了一個有用的通用消息框。 我（可能還有其他人）可以在任何地方使用它。 我想將其提取到一個js文件中，以便可以在其他項目中引用該js文件。 但是我不知道如何包括引導模式對話框的HTML代碼塊。 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A useful generic message box</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="~/Content/bootstrap.min.css" media="screen" /> <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="~/Scripts/bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> function testAlert() { messageBox('Something went wrong!', 'error', null, function () { alert('Message dialog closed.'); }); } function testConfirm() { messageBox('Do you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' }, function () { alert('"Yes" was selected.'); }); } function testPrompt() { messageBox('How do you feel now?', 'normal', { showTextBox: true }, function (event) { alert('User entered "' + event.data.getUserInput() + '".'); }); } function messageBox(msg, significance, options, actionConfirmedCallback) { var okButtonName, cancelButtonName, showTextBox; if (options == null) { okButtonName = 'OK'; cancelButtonName = null; showTextBox = null; } else { okButtonName = options.okButtonName; cancelButtonName = options.cancelButtonName; showTextBox = options.showTextBox; } if (showTextBox == true) $('#MessageDialogTextArea').show(); else $('#MessageDialogTextArea').hide(); //if (typeof (okButtonName) != 'undefined') if (okButtonName != null) $('#messageDialogOkButton').html(okButtonName); else $('#messageDialogOkButton').html('OK'); //if (typeof (cancelButtonName) == 'undefined') if (cancelButtonName == null) $('#messageDialogCancelButton').hide(); else { $('#messageDialogCancelButton').show(); $('#messageDialogCancelButton').html(cancelButtonName); } $('#messageDialogOkButton').unbind('click'); if (typeof (actionConfirmedCallback) != 'undefined') $('#messageDialogOkButton').on('click', { getUserInput: getUserInput }, actionConfirmedCallback); else $('#messageDialogOkButton').removeAttr('onclick'); var content = $("#MessageDialogContent"); if (significance == 'error') content.attr('class', 'text-danger'); else if (significance == 'warning') content.attr('class', 'text-warning'); else content.attr('class', 'text-success'); content.html(msg); $("#MessageDialog").modal(); } </script> </head> <body> <a href="#" onclick="testAlert();">Test alert</a> <br/> <a href="#" onclick="testConfirm();">Test confirm</a> <br/> <a href="#" onclick="testPrompt();">Test prompt</a> <div class="modal fade" id="MessageDialog" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <p class="text-success" id="MessageDialogContent">Some text in the modal.</p> <p><textarea id="MessageDialogTextArea" cols="70" rows="5"></textarea></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal" id="messageDialogOkButton">OK</button> <button type="button" class="btn btn-default" data-dismiss="modal" id="messageDialogCancelButton">Cancel</button> </div> </div> </div> </div> </body> </html>

2 個解決方案

解決方案1
 1  2016-06-29 01:45:46

這樣做不是很習慣，更不用說合理了。 即便如此，假設您不需要ES5合規性，則可以將整個內容轉儲到模板文字中。 然后，將其推入腳本中某個位置的dom中。 

const template = `
    <div class="modal fade" id="MessageDialog" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p class="text-success" id="MessageDialogContent">Some text in the modal.</p>
                    <p><textarea id="MessageDialogTextArea" cols="70" rows="5"></textarea></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="messageDialogOkButton">OK</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="messageDialogCancelButton">Cancel</button>
                </div>
            </div>
        </div>
    </div>
`

$('somehidden div').html(template);

這是ES5版本 

    var template = '<div class="modal fade" id="MessageDialog" role="dialog">'+
    '    <div class="modal-dialog">'+
    '        <div class="modal-content">'+
    '            <div class="modal-body">'+
    '                <p class="text-success" id="MessageDialogContent">Some text in the modal.</p>'+
    '                <p><textarea id="MessageDialogTextArea" cols="70" rows="5"></textarea></p>'+
    '            </div>'+
    '            <div class="modal-footer">'+
    '                <button type="button" class="btn btn-primary" data-dismiss="modal" id="messageDialogOkButton">OK</button>'+
    '                <button type="button" class="btn btn-default" data-dismiss="modal" id="messageDialogCancelButton">Cancel</button>'+
    '            </div>'+
    '        </div>'+
    '    </div>'+
    '</div>';
$('somehidden div').html(template);

更新

更可維護的解決方案：

將此html放在自己的文件modal.html 。 

   <div class="modal fade" id="MessageDialog" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p class="text-success" id="MessageDialogContent">Some text in the modal.</p>
                    <p><textarea id="MessageDialogTextArea" cols="70" rows="5"></textarea></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="messageDialogOkButton">OK</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="messageDialogCancelButton">Cancel</button>
                </div>
            </div>
        </div>
    </div>

帶上您的JS並將其放在自己的文件modal.js 

      messageBox('Something went wrong!', 'error', null, function () {
            alert('Message dialog closed.');
        });
    }

    function testConfirm() {
        messageBox('Do you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' }, function () {
            alert('"Yes" was selected.');
        });
    }

function testPrompt() {
    messageBox('How do you feel now?', 'normal', { showTextBox: true }, function (event) {
        alert('User entered "' + event.data.getUserInput() + '".');
    });
}

    function messageBox(msg, significance, options, actionConfirmedCallback) {
        var okButtonName, cancelButtonName, showTextBox;

        if (options == null) {
            okButtonName = 'OK';
            cancelButtonName = null;
            showTextBox = null;
        } else {
            okButtonName = options.okButtonName;
            cancelButtonName = options.cancelButtonName;
            showTextBox = options.showTextBox;
        }


        if (showTextBox == true)
            $('#MessageDialogTextArea').show();
        else
            $('#MessageDialogTextArea').hide();

        //if (typeof (okButtonName) != 'undefined')
        if (okButtonName != null)
            $('#messageDialogOkButton').html(okButtonName);
        else
            $('#messageDialogOkButton').html('OK');

        //if (typeof (cancelButtonName) == 'undefined')
        if (cancelButtonName == null)
            $('#messageDialogCancelButton').hide();
        else {
            $('#messageDialogCancelButton').show();
            $('#messageDialogCancelButton').html(cancelButtonName);
        }

        $('#messageDialogOkButton').unbind('click');

        if (typeof (actionConfirmedCallback) != 'undefined')
            $('#messageDialogOkButton').on('click', { getUserInput: getUserInput }, actionConfirmedCallback);
        else
            $('#messageDialogOkButton').removeAttr('onclick');

        var content = $("#MessageDialogContent");

        if (significance == 'error')
            content.attr('class', 'text-danger');
        else if (significance == 'warning')
            content.attr('class', 'text-warning');
        else
            content.attr('class', 'text-success');

        content.html(msg);
        $("#MessageDialog").modal();

在文件中使用 

<html>
<head>
  <script type="text/javascript>
    $(function() {
      $( body ).load( "path/to/modal.html" );
    });
  </script>
<script src="path/to/modal.js" type="text/javascript"></script>
</head>

解決方案2
 0  2016-06-29 03:24:31

在此處輸入圖片說明 我想出了在以太石的幫助下如何做的事情-他的回答還不完整，但指出了正確的方向。

現在它比bootbox.js更好 ，因為

  • 它可以做bootbox.js可以做的一切；
  • 使用語法更簡單
  • 它使您可以使用“錯誤”，“警告”或“信息”優雅地控制消息的顏色
  • Bootbox長986行，我的長110行

digimango.messagebox.js ： 

 const dialogTemplate = '\\ <div class ="modal" id="digimango_messageBox" role="dialog">\\ <div class ="modal-dialog">\\ <div class ="modal-content">\\ <div class ="modal-body">\\ <p class ="text-success" id="digimango_messageBoxMessage">Some text in the modal.</p>\\ <p><textarea id="digimango_messageBoxTextArea" cols="70" rows="5"></textarea></p>\\ </div>\\ <div class ="modal-footer">\\ <button type="button" class ="btn btn-primary" id="digimango_messageBoxOkButton">OK</button>\\ <button type="button" class ="btn btn-default" data-dismiss="modal" id="digimango_messageBoxCancelButton">Cancel</button>\\ </div>\\ </div>\\ </div>\\ </div>'; // See the comment inside function digimango_onOkClick(event) { var digimango_numOfDialogsOpened = 0; function messageBox(msg, significance, options, actionConfirmedCallback) { if ($('#digimango_MessageBoxContainer').length == 0) { var iDiv = document.createElement('div'); iDiv.id = 'digimango_MessageBoxContainer'; document.getElementsByTagName('body')[0].appendChild(iDiv); $("#digimango_MessageBoxContainer").html(dialogTemplate); } var okButtonName, cancelButtonName, showTextBox, textBoxDefaultText; if (options == null) { okButtonName = 'OK'; cancelButtonName = null; showTextBox = null; textBoxDefaultText = null; } else { okButtonName = options.okButtonName; cancelButtonName = options.cancelButtonName; showTextBox = options.showTextBox; textBoxDefaultText = options.textBoxDefaultText; } if (showTextBox == true) { if (textBoxDefaultText == null) $('#digimango_messageBoxTextArea').val(''); else $('#digimango_messageBoxTextArea').val(textBoxDefaultText); $('#digimango_messageBoxTextArea').show(); } else $('#digimango_messageBoxTextArea').hide(); if (okButtonName != null) $('#digimango_messageBoxOkButton').html(okButtonName); else $('#digimango_messageBoxOkButton').html('OK'); if (cancelButtonName == null) $('#digimango_messageBoxCancelButton').hide(); else { $('#digimango_messageBoxCancelButton').show(); $('#digimango_messageBoxCancelButton').html(cancelButtonName); } $('#digimango_messageBoxOkButton').unbind('click'); $('#digimango_messageBoxOkButton').on('click', { callback: actionConfirmedCallback }, digimango_onOkClick); $('#digimango_messageBoxCancelButton').unbind('click'); $('#digimango_messageBoxCancelButton').on('click', digimango_onCancelClick); var content = $("#digimango_messageBoxMessage"); if (significance == 'error') content.attr('class', 'text-danger'); else if (significance == 'warning') content.attr('class', 'text-warning'); else content.attr('class', 'text-success'); content.html(msg); if (digimango_numOfDialogsOpened == 0) $("#digimango_messageBox").modal(); digimango_numOfDialogsOpened++; } function digimango_onOkClick(event) { // JavaScript's nature is unblocking. So the function call in the following line will not block, // thus the last line of this function, which is to hide the dialog, is executed before user // clicks the "OK" button on the second dialog shown in the callback. Therefore we need to count // how many dialogs is currently showing. If we know there is still a dialog being shown, we do // not execute the last line in this function. if (typeof (event.data.callback) != 'undefined') event.data.callback($('#digimango_messageBoxTextArea').val()); digimango_numOfDialogsOpened--; if (digimango_numOfDialogsOpened == 0) $('#digimango_messageBox').modal('hide'); } function digimango_onCancelClick() { digimango_numOfDialogsOpened--; if (digimango_numOfDialogsOpened == 0) $('#digimango_messageBox').modal('hide'); }

要使用digimango.messagebox.js ： 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A useful generic message box</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="~/Content/bootstrap.min.css" media="screen" /> <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="~/Scripts/bootstrap.js" type="text/javascript"></script> <script src="~/Scripts/bootbox.js" type="text/javascript"></script> <script src="~/Scripts/digimango.messagebox.js" type="text/javascript"></script> <script type="text/javascript"> function testAlert() { messageBox('Something went wrong!', 'error'); } function testAlertWithCallback() { messageBox('Something went wrong!', 'error', null, function () { messageBox('OK clicked.'); }); } function testConfirm() { messageBox('Do you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' }, function () { messageBox('Are you sure you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' }); }); } function testPrompt() { messageBox('How do you feel now?', 'normal', { showTextBox: true }, function (userInput) { messageBox('User entered "' + userInput + '".'); }); } function testPromptWithDefault() { messageBox('How do you feel now?', 'normal', { showTextBox: true, textBoxDefaultText: 'I am good!' }, function (userInput) { messageBox('User entered "' + userInput + '".'); }); } </script> </head> <body> <a href="#" onclick="testAlert();">Test alert</a> <br/> <a href="#" onclick="testAlertWithCallback();">Test alert with callback</a> <br /> <a href="#" onclick="testConfirm();">Test confirm</a> <br/> <a href="#" onclick="testPrompt();">Test prompt</a><br /> <a href="#" onclick="testPromptWithDefault();">Test prompt with default text</a> <br /> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在js文件中包含html文件 在html上包含js文件 如何在HTML文件中包含.js腳本 如何將html和js代碼包含到一個js文件中？ 通過js include將html文件包含在html中 在 JavaScript (.js) 文件中包含 HTML 將外部JS文件包含到HTML中 如何在HTML文件中包含外部babel js（es 6）文件？ 如何在聚合物 3 中包含外部 html 文件和 js 文件？ 如何將.js文件包含到compojure服務器提供的html文件中？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM