將<script>的變量傳遞給HTML代碼？

我想<script>標記之間聲明的變量傳遞給URL的iframe標籤，就像這樣：將<script>的變量傳遞給HTML代碼？

<script> 
    var1 = 1; 
</script> 

<iframe src="http://link_to_site?param=var1>

但是，這是行不通的。是否有可能做到這一點，我該怎麼做？

感謝

來源

2016-02-25 mric750

HTML不能像那樣工作。你要做的是在JavaScript代碼中標識目標HTML元素，並在該代碼中修改它的'src'屬性。 – David

感謝您的回答，但您能舉一個簡短的例子，因爲我不確定要明白... – mric750

首先，你需要一種方法來確定你的JavaScript代碼的目標元素。例如，給元件的id屬性：。

<iframe id="myIframe" />

（當然，還有其他的方法來識別的元素相當複雜的查詢可以被構造爲在整個DOM識別特定的元件，但一個id是特別簡單的方法。至少在這個例子中）

然後在你的JavaScript代碼，你會得到該元素的引用，並設置其屬性src：

var var1 = 1; 
document.getElementById('myIframe').src = 'http://link_to_site?param=' + var1;

需要注意的一點是，該代碼在之後需要執行該元素存在於頁面上。如果它在頁面上運行，那麼該元素將不會存在，並且getElementById()將不會返回任何內容。

「之後」可能意味着它立即運行，但在頁面上存在「低於」元素。或者這可能意味着代碼被放置在頁面的任何位置，但直到以後纔會真正執行，例如在事件處理程序中。

來源

2016-02-25 14:20:17 David

好，清晰，簡潔的解釋。 –

謝謝你的回答！最後一個問題，是否有可能通過其「id」檢索特定元素的值？ – mric750

@ mric750：當然。您幾乎可以做任何事情來檢查或操縱JavaScript中的HTML元素。如果元素具有'value'屬性（比如'input'元素），那麼您只需在元素引用中讀取'.value'。 – David

* FYI-很抱歉，但接受的答案不實際工作。參見下文。 *

我建議您使用jQuery JS庫來協助您完成任務。它規範了JS環境，所以你不必擔心你的用戶使用的瀏覽器。

這也使得它更容易做一些簡單的任務，如獲得特定元素等

這裏是代碼演示如何動態創建一個iFrame後網頁加載完畢。這很重要，因爲JS是同步運行的：換句話說，如果您爲特定元素編寫JS，但該元素尚不存在於頁面上，則JS將失敗。

通過包裝你的代碼：

$(document).ready(function(){})

可以確保該網頁將完成裝貨前的JS執行。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 

<body> 

</body> 

<script type="text/javascript"> 
    var1 = 1; 
    $(document).ready(function(){ 
     var theiFrame = '<iframe src="http://link_to_site?param=' + var1 + '">'; 
     $('body').append(theiFrame);  
    }) 
</script>

iFrames有點奇怪，因爲它們混淆了文檔的「onload」事件。這是將您的iFrame動態添加到DOM而不是將其添加爲HTML標記的另一個原因。閱讀這篇文章，以獲得更多信息：

http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance

來源

2016-02-25 14:17:59

請解釋解決方案，不要只是發佈代碼。 –

對不起，我以爲代碼的一種解釋自己。我會添加詳細信息。 –

每個看到這個問題的人都會對JavaScript有不同程度的瞭解。對於某些人來說，可能很明顯會發生什麼，對於其他人來說可能不會。你事先不知道。但除了解釋您的解決方案之外，您還應該解釋OP的問題：爲什麼他們的解決方案無法工作？如果你不解釋事情，其他人將有更難學習的時間。 –

將<script>的變量傳遞給HTML代碼？

回答

相關問題