如何将JavaScript变量作为HTML中object标签的data属性值？

直接在HTML的object标签里写data=filename2无效的原因是：HTML是静态标记语言，它会把filename2当成普通字符串处理，而不会去读取JavaScript中定义的同名变量值，所以实际加载的是名为filename2的文件，而非你定义的PDFxx.pdf。

下面是几种可行的实现方式：

方式一：获取已有元素并设置属性 #

先给object标签加一个ID，方便JavaScript定位：

<object id="pdfContainer" width="800" height="500"></object>

然后用JavaScript获取该元素，动态设置data属性：

var filename2 = "PDFxx.pdf";
document.getElementById("pdfContainer").setAttribute("data", filename2);

方式二：动态创建object元素 #

如果页面中原本没有object标签，可以直接用JavaScript生成并添加到页面：

var filename2 = "PDFxx.pdf";
// 创建object元素
var pdfObject = document.createElement("object");
// 设置属性
pdfObject.setAttribute("data", filename2);
pdfObject.setAttribute("width", "800");
pdfObject.setAttribute("height", "500");
// 将元素添加到页面指定位置，比如body
document.body.appendChild(pdfObject);

方式三：用模板字符串动态插入（ES6+） #

如果你的项目支持ES6语法，可以用模板字符串拼接HTML代码，再插入到页面：

var filename2 = "PDFxx.pdf";
// 拼接带变量的HTML字符串
var pdfHtml = `<object data="${filename2}" width="800" height="500"></object>`;
// 插入到页面的容器中，比如某个id为pdfWrapper的div
document.getElementById("pdfWrapper").innerHTML = pdfHtml;

注意：如果PDF文件不在当前HTML文件的同一目录下，要确保filename2里的路径正确（可以是相对路径或绝对路径）。

内容的提问来源于stack exchange，提问作者slot867