來自另一個HTML文件的引導彈出式數據

而不是硬編碼的數據，我希望它從html文件（如果您願意的話）檢索它。我怎樣才能做到這一點？比方說，我有一個<h1>和<body>另一個HTML文件和酥料餅應該從它（酥料餅的頭/體）來自另一個HTML文件的引導彈出式數據

<button type="button" class="btn btn-default" title="Help" data-toggle="popover" data-content="423241421453453"><span class="glyphicon glyphicon-info-sign" style="font-size: 20px; padding-top:5px"></span></button> 
</div>

$(document).ready(function popover() { 
    $('[data-toggle="popover"]').popover(); 
});

來源

2015-10-15 Buda Cristian

比方說你有一個這樣的模板得到的數據：

<h1>header</h1> 
<body>this is a test</body>

然後爲data-templatefile屬性添加模板文件名以您的按鈕標記：

<button type="button" data-templatefile="template.html" class="btn btn-default" title="Help" data-toggle="popover"><span class="glyphicon glyphicon-info-sign" style="font-size: 20px; padding-top:5px"></span></button>

然後初始化酥料餅是這樣的：

$('[data-toggle="popover"]').popover({ 
    html : true, 
    content : function() { 
     return loadContent($(this).data('templatefile')) 
    } 
});

這是straigt前進。 loadContent()需要更棘手。如果您使用jQuery解析內容，您將看到<body>標籤被剝離。這是the browser doing that，而不是jQuery。但是你可以使用一個DOMParser而不是準確提取這些標籤要在酥料餅的使用方法：

function loadContent(templateFile) { 
    return $('<div>').load(templateFile, function(html) { 
     parser = new DOMParser(); 
     doc = parser.parseFromString(html, "text/html"); 
     return doc.querySelector('h1').outerHTML + doc.querySelector('body').outerHTML; 
    }) 
}

結果將是這樣的：

演示 - >http://plnkr.co/edit/9pHmKBvhxMOdGjCHz2OG?p=preview

來源

2015-10-15 11:39:42 davidkonrad

恐怕我無法實現它的功能，你可以把它放在一個笨重的東西里面嗎？ –

謝謝，我會午休，我會等待您的回覆。 –

@BudaCristian - 看到更新，馬上工作 - 也許你有一些其他腳本錯誤，防止代碼被執行？ – davidkonrad

來自另一個HTML文件的引導彈出式數據

回答

相關問題