Javascript 两个代码完全相同的jsfiddle,但一个工作,另一个不工作';T
下面的小提琴很好用 我创建了第二个SFIDLE来测试它,并复制了与第一个完全相同的所有内容(HTML/CSS/JS)。我也包含了相同的资源,但它不起作用 两者的HTML是相同的Javascript 两个代码完全相同的jsfiddle,但一个工作,另一个不工作';T,javascript,html,jquery,api,Javascript,Html,Jquery,Api,下面的小提琴很好用 我创建了第二个SFIDLE来测试它,并复制了与第一个完全相同的所有内容(HTML/CSS/JS)。我也包含了相同的资源,但它不起作用 两者的HTML是相同的 <div class="container"> <h1>Displaying User Data</h1> <p>Log in with your Spotify account and this demo will display informatio
<div class="container">
<h1>Displaying User Data</h1>
<p>Log in with your Spotify account and this demo will display information about you fetched using the Spotify Web API</p>
<button class="btn btn-primary" id="btn-login">Login</button>
<div id="result"></div>
</div>
<script id="result-template" type="text/x-handlebars-template">
<dl>
<img src="{{images.0.url}}">
<dt>User Name</dt>
<dd>{{id}}</dd>
<dt>Display Name</dt>
<dd>{{display_name}}</dd>
<dt>Country</dt>
<dd>{{country}}</dd>
<dt>Followers</dt>
<dd>{{followers.total}}</dd>
<dt>Profile</dt>
<dd><a href="{{external_urls.spotify}}" target="_blank">{{external_urls.spotify}}</a></dd>
<dt>Email</dt>
<dd>{{email}}</dd>
<dt>Product</dt>
<dd>{{product}}</dd>
</dl>
</script>
(function() {
function login(callback) {
var CLIENT_ID = '6b284830006843e7ae7b170725715aed';
var REDIRECT_URI = 'http://jmperezperez.com/spotify-oauth-jsfiddle-proxy/';
function getLoginURL(scopes) {
return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID +
'&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +
'&scope=' + encodeURIComponent(scopes.join(' ')) +
'&response_type=token';
}
var url = getLoginURL([
'user-read-email'
]);
var width = 450,
height = 730,
left = (screen.width / 2) - (width / 2),
top = (screen.height / 2) - (height / 2);
window.addEventListener("message", function(event) {
var hash = JSON.parse(event.data);
if (hash.type == 'access_token') {
callback(hash.access_token);
}
}, false);
var w = window.open(url,
'Spotify',
'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left
);
}
function getUserData(accessToken) {
return $.ajax({
url: 'https://api.spotify.com/v1/me',
headers: {
'Authorization': 'Bearer ' + accessToken
}
});
}
var templateSource = document.getElementById('result-template').innerHTML,
template = Handlebars.compile(templateSource),
resultsPlaceholder = document.getElementById('result'),
loginButton = document.getElementById('btn-login');
loginButton.addEventListener('click', function() {
login(function(accessToken) {
getUserData(accessToken)
.then(function(response) {
loginButton.style.display = 'none';
resultsPlaceholder.innerHTML = template(response);
});
});
});
})();
.container {
margin: 1em;
}
img {
margin-bottom: 1em;
}
CSS对两者都是一样的
<div class="container">
<h1>Displaying User Data</h1>
<p>Log in with your Spotify account and this demo will display information about you fetched using the Spotify Web API</p>
<button class="btn btn-primary" id="btn-login">Login</button>
<div id="result"></div>
</div>
<script id="result-template" type="text/x-handlebars-template">
<dl>
<img src="{{images.0.url}}">
<dt>User Name</dt>
<dd>{{id}}</dd>
<dt>Display Name</dt>
<dd>{{display_name}}</dd>
<dt>Country</dt>
<dd>{{country}}</dd>
<dt>Followers</dt>
<dd>{{followers.total}}</dd>
<dt>Profile</dt>
<dd><a href="{{external_urls.spotify}}" target="_blank">{{external_urls.spotify}}</a></dd>
<dt>Email</dt>
<dd>{{email}}</dd>
<dt>Product</dt>
<dd>{{product}}</dd>
</dl>
</script>
(function() {
function login(callback) {
var CLIENT_ID = '6b284830006843e7ae7b170725715aed';
var REDIRECT_URI = 'http://jmperezperez.com/spotify-oauth-jsfiddle-proxy/';
function getLoginURL(scopes) {
return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID +
'&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +
'&scope=' + encodeURIComponent(scopes.join(' ')) +
'&response_type=token';
}
var url = getLoginURL([
'user-read-email'
]);
var width = 450,
height = 730,
left = (screen.width / 2) - (width / 2),
top = (screen.height / 2) - (height / 2);
window.addEventListener("message", function(event) {
var hash = JSON.parse(event.data);
if (hash.type == 'access_token') {
callback(hash.access_token);
}
}, false);
var w = window.open(url,
'Spotify',
'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left
);
}
function getUserData(accessToken) {
return $.ajax({
url: 'https://api.spotify.com/v1/me',
headers: {
'Authorization': 'Bearer ' + accessToken
}
});
}
var templateSource = document.getElementById('result-template').innerHTML,
template = Handlebars.compile(templateSource),
resultsPlaceholder = document.getElementById('result'),
loginButton = document.getElementById('btn-login');
loginButton.addEventListener('click', function() {
login(function(accessToken) {
getUserData(accessToken)
.then(function(response) {
loginButton.style.display = 'none';
resultsPlaceholder.innerHTML = template(response);
});
});
});
})();
.container {
margin: 1em;
}
img {
margin-bottom: 1em;
}
有什么线索可以解释为什么会发生这种情况吗?谢谢查看侧栏中的“参考资料”部分。第一个有这3个额外资源:
- cached.css
- handlebar.min.js
- jquery-1.10.1.min.js
<link rel="stylesheet" type="text/css" href="https://developer.spotify.com/web-api/static/css/cached.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
请在问题本身中添加一个链接,而不仅仅是一个指向外部资源的链接,该资源可能因任何原因不可用/无法访问。谢谢Ted,我添加了相同的3个资源,但仍然不起作用。这是不可能的,我只是把你的小提琴叉起来,添加了有效的脚本。对不起,梅尔基亚,我按照你的建议做了,但这对我不起作用。也许你只是在窗口打开时看到Spotify弹出式日志?但是您是否通过登录来测试数据是否加载?这就是问题所在,在登录后,用户的数据应该像在第一个JSFIDLE中一样加载,但在第二个JSFIDLE上不起作用。当然,我不会使用不受信任的oidc登录(这就是我使用自己的oidc的原因)。应用程序中的clientID必须有几个允许的url(其中一个必须是原始fiddler的url)。如果你想要你自己的去生成它,非常感谢你为我指出了正确的方向。clientID只允许重定向URI中的url。这是一个文件的url,该文件包含一个脚本,该脚本指定了主机,该主机具有脚本要使用的确切协议和域。第二个Fiddle的地址使用HTTPS,而第一个Fiddle使用HTTP,这就是它无法工作的原因。在弄清楚它是如何工作的之后,我按照你的建议注册了自己的URL。我是新来的网络API的,所以谢谢你的帮助。