使用文件对话框动态更改嵌入src属性

我实现了一个在Linux机器上本地运行的HTML页面（使用最新的Firefox版本）。它用于嵌入我已编程的插件。使用文件对话框动态更改嵌入src属性

此刻，我静态传递一个文件路径，插件已经加载，这是硬编码在HTML文件：所有.bbx文件生成

<embed id="embed1" type="application/x-bbx" src="/tmp/testfile.bbx"></embed>

的HTML页面。我目前正试图找出如何通过添加一个<input type="file">元素来避免硬编码路径。目的是动态更改加载的文件（由src指定）以避免生成所有.bbx文件的HTML页面。

由于浏览器不允许访问文件路径：我如何根据加载的文件更改embed的源代码？

由于几个技术原因，我想避免使用JQuery。另请注意，该页面仅由特定用户在本地运行。

编辑1：该插件是可脚本化的，即我可以调用函数并使用JavaScript将参数传递给插件。因此，获取整个文件路径并将其传递给插件就足够了，而插件依次在内部完成。

编辑2：对于澄清：我想，以避免用户手动输入文件路径的负担，这就是为什么我打算用<input type="file">

来源

2015-08-19 Paddre

那么，你想使用JavaScript？ – Gacci

是的，我喜欢。但没有更多的，即我不想（或技术上不能）使用除JS和HTML以外的语言 – Paddre

如果我的理解没错，这应该这样做！

<script> 
var embed1 = document.getElementById('embed1'); 
embed1.src = 'your path'; 
</script>

来源

2015-08-19 07:43:46 Gacci

这没有帮助，因为我仍然没有得到用户指定的文件路径（除非他手动输入文件路径，这是我想要避免的） – Paddre

下面是一个完整的例子：

JSFiddle

<input type="text" id="path" name="path" /> 
<input type="submit" id="submit" value="Change it" onclick="changePath()"> 
<embed id="embed1" type="application/x-bbx" src="/tmp/testfile.bbx"></embed> 

<script> 
function changePath() { 
    var e = document.getElementById('path'); 
    var val = e.value; 
    var embed1 = document.getElementById('embed1'); 
    embed1.src = val; 
} 
</script>

来源

2015-08-19 07:49:53

我想避免让用户手动键入文件路径。这就是我考虑使用''标签的原因。 – Paddre

var Target = "/tmp/testfile2.bbx"; 
var Source = document.getElementById('embed1'); 
var Clone = Source.cloneNode(true); 
Clone.setAttribute('src',Target); 
Source.parentNode.replaceChild(Clone,Source);

但浏览器的历史在这里得到任何事件......所以.back（）将无法正常工作。这就是我今天来到这里的方式。希望这可以帮助。对不起，如果没有正确的时刻。 ;-)

来源

2016-12-06 00:14:46

使用文件对话框动态更改嵌入src属性

回答

相关问题