使用文件對話框動態更改嵌入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屬性

回答

相關問題