如何通过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？

回答

相关问题