如何通過CSS在div中插入外部HTML？

我想通過CSS在<div>插入外部HTML模板，但我不能。首先我嘗試了content，但沒有結果。如何通過CSS在div中插入外部HTML？

.overbox { 
    display: none; 
    position: absolute;  
    background-color: #FFFFFF; 
    content: url("../mytemplate.html");  
    padding: 10px; 
    top: 25%; 
    left: 25%; 
    width: auto; 
    height: auto; 
    z-index:1002; 
    overflow: auto; 
}

任何想法？也許用jQuery或Javascript？

來源

2015-06-08 Acicate

不能使用CSS來檢索外部內容。您肯定需要使用JavaScript，或者可能需要使用服務器端包含，具體取決於您從中檢索內容的位置。 –

@RoryMcCrossan，你確定嗎？這表明否則https://developer.mozilla.org/en-US/docs/Web/CSS/content – AmmarCSE

@AmmarCSE如果您指的是您可以提供給「內容」的URL，該URL只能可靠地用於圖像，不是HTML。 –

在css中使用content的主要目的是插入靜態數據:before和:after僞元素，你試圖做的是最適合javascript的任務。在內容中，您可以使用url來指定圖像，但無法呈現完整的html內容。

來源

2015-06-08 09:13:20

他不能使用外部內容，但他可以調用帶有內容屬性的本地URI不僅圖像， – Prime

您對「本地URI」的含義是什麼？ – Acicate

我認爲用JavaScript，jquery是最好的方法。試試這個功能

function addDiv() { 
    var div = document.createElement('div'); 
    div.className = 'row'; 
    div.innerHTML = '<input type="text" name="name" value="" />\ 
    <input type="text" name="value" value="" />\ 
    <input type="button" value="-" onclick="tempfunction()">'; 
    document.getElementById('content').appendChild(div); 
    }

來源

2015-06-08 09:16:49 MNF

如果加載外部html文件可能更好使用ajax – Pete

我看到這個功能嘗試添加一個div，但確切的目的是插入一個外部的HTML在以前存在的div – Acicate

我不知道你爲什麼都選擇了這種方法，但content CSS屬性只能用僞元素before和after工作。你的CSS代碼應該是這樣的。

.overbox:before{ 
content: url(../mytemplate.html); 
position: absolute;  
background-color: #FFFFFF; 
padding: 10px; 
top: 25%; 
left: 25%; 
width: auto; 
height: auto; 
z-index:1002; 
overflow: auto; 
}

注意：您不能使用在內容屬性的外部鏈接。

來源

2015-06-08 09:20:21 Prime

CSS是爲將呈現頁面，，而不是內容。所以我覺得你應該用JavaScript如果你想動態生成內容。 CSS不選擇這個。

參考：Link

來源

2015-06-08 09:23:45

好吧！現在我知道是不可能在「內容」中添加一個html – Acicate

是否依賴於用戶的操作外模板變化的內容（點擊即一個複選框或選項中選擇）？

模板是否需要多次加載到同一個div中（即每隔幾分鐘或每次單擊一個按鈕時）？

如果這些問題的答案是是那麼你應該使用ajax。沿着以下線的東西會工作：

$.ajax({ 
    url: '../mytemplate.html', 
    success:function(data){ 
    $('.overbox').html(data); 
    } 
});

請注意，這是簡化，也應該錯誤檢查等。欲瞭解更多信息請參閱jquery docs on ajax或「The Perfect jQuery AJAX Request」。

如果答案都上述問題是沒有，那麼你應該使用服務器端語言，包括在div文件，然後發送給客戶端。

這個使用PHP的一個例子是：

<div class="overbox"> 
    <?php include '../mytemplate.html';?> 
</div>

來源

2015-06-08 09:48:59 Tims

如何通過CSS在div中插入外部HTML？

回答

相關問題