Question

我一直在尝试导入html表单并将其嵌入到单独的html文件中，我的javascript试图上传包含表单的文件，如下所示

    <link rel="import" href="formhtml5.html" onload="handleLoad(event)" 
     onerror="handleError(event)">
     var link = document.querySelector('link[rel="import"]');
     var el = link.import.querySelector('#flexyForm');
     document.body.appendChild(link);

但是，当我尝试查看表单是否已上传时，我的页面只是空白吗？几天来一直在为此苦苦挣扎，这让我发疯了，有人猜到它是如何工作的吗？

Answer 1

如果这是您要寻找的内容，则可以使用jQuery。

firstFile.html

<html> 
<head> 
<script src="jquery.js"></script> 
<script> 
$(function(){
  $("#includeForm").load("formFile.html"); 
});
</script> 
</head> 

<body> 
 <div id="includeForm"></div>
</body> 
</html>

formFile.html

<p>This is my Form</p>

注意：您的问题不清楚，您没有上传任何内容。相反，您只是将一些代码行从另一个html文件导入到您的文件中。如果是，则上面的代码应该可以正常工作！

此外，如果随附的HTML文件已附加CSS，则它可能会弄乱您的页面样式。因此最好按照firstFile.html的链接规则在formFile中进行内部CSS或更改CSS外部链接。

Answer 2

除了JS，您还可以使用php来获取第二个文件的内容。

<?php file_get_contents="path to your file here" ?>

如何将html表单导入到单独的文件中

2 个答案: