javascript - div에서 api 호출로 텍스트 삽입하기

vimeo에 API 호출을하고 div #embed에 embed를 삽입하려면 다음 기본 스크립트가 있어야합니다. 그러나 다른 div #embedthis 텍스트를 가져 와서 API 호출을 어셈블하는 데 문제가 있습니다.javascript - div에서 api 호출로 텍스트 삽입하기

<body>에 입력하면 아래 코드가 작동합니다. 그러나 나는 또한 # embedthis의 내용을 동적으로 변경하고, 표시된 embed를 업데이트 할 수 있기를 원한다. 어떤 도움이라도 대단히 감사합니다!

스크립트

// 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;

보기 : 나는 #embedthis 아직로드되지 아마 때문에, document.getElementById('embedthis')" is null을 받기로

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

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

출처

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 호출로 텍스트 삽입하기

답변

관련 문제