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调用嵌入

回答

相关问题