javascript - 插入文本從一個div到api調用嵌入

我有以下基本腳本，使api調用vimeo並將嵌入插入到div＃embed。我遇到了麻煩，無論如何抓住另一個div #embedthis的文本並從中組裝api調用。javascript - 插入文本從一個div到api調用嵌入

如果放在<body>中，下面的代碼可以工作。不過，我想正確設置它，因爲我希望能夠動態更改#embedthis的內容，更新顯示的嵌入。任何幫助非常感謝！

腳本：

// URL to get embed 
    var videoUrl = document.getElementById('embedthis').innerHTML; 

    // oEmbed endpoint for Vimeo using JSON 

    var endpoint = 'http://www.vimeo.com/api/oembed.json'; 

    // Tell Vimeo what function to call 
    var callback = 'embedVideo'; 

    // Put together the URL 
    var url = endpoint + '?url=' + encodeURIComponent(videoUrl) + '&callback=' + callback + '&width=640'; 

    // put video on page 
    function embedVideo(video) { 
     document.getElementById('embed').innerHTML = unescape(video.html); 
    } 

    // load data from Vimeo 
    function MakeEmbed() { 
     var js = document.createElement('script'); 
     js.setAttribute('type', 'text/javascript'); 
     js.setAttribute('src', url); 
     document.getElementsByTagName('head').item(0).appendChild(js); 
    }; 

    window.onload = MakeEmbed;

觀點：

<div id="embed"> 
    ... 
</div> 

<div id="embedthis">http://vimeo.com/24453255</div>

有了這個，我得到document.getElementById('embedthis')" is null，可能是因爲#embedthis是尚未加載。

來源

2011-08-29 tuddy

問題是，調用var videoUrl = document.getElementById('embedthis').text()時，瀏覽器尚未創建<div>，因爲瀏覽器遇到該代碼時會立即調用該代碼，我假設該代碼位於您的<head>部分。

如果將代碼移動到在window.onload或document.ready上調用的函數，您的代碼應該可以正常工作，因爲這可以確保元素已創建。

編輯

像這樣（註釋爲簡潔起見刪除）：

var url; 
function embedVideo(video) { ... } 

var my_onload = function() { 
    var videoUrl = document.getElementById('embedthis').innerHTML; 
    var endpoint = 'http://www.vimeo.com/api/oembed.json'; 
    var callback = 'embedVideo'; 
    url = endpoint + '?url=' + encodeURIComponent(videoUrl) + '&callback=' + callback + '&width=640'; 
    MakeEmbed(); 
} 

window.onload = my_onload;

來源

2011-08-29 09:32:49 NobRuked

我認爲你是對的，我需要那不找embedthis它已經準備好之前的功能。我只是編輯了我的帖子，其代碼符合預期，如果我將它放在的底部進行測試。我只是無法弄清楚如何正確地構造函數，以便只在加載DOM時查找「embedthis」，同時確保所有其他腳本也可以訪問該變量。 – tuddy

@tuddy查看我的編輯示例。 – NobRuked

不錯，是的，這就是我所做的很多。只有我能夠在任何原因（？）下將var url保留在主函數中，現在我只需通過html中的按鈕進行onclick調用即可觸發該操作。現在運作良好。謝謝！ – tuddy

javascript - 插入文本從一個div到api調用嵌入

回答

相關問題