如何使用Javascript检测当前显示元素的ID？
我基本上使用Gmail API为自己创建发送和回复功能。问题出在回复部分。我正在使用jQuery为收件箱中显示的每条消息动态创建std::forward_list（ max-count：10 ）和一组单独的div s（任何一个）单击邮件链接时出现）其中对于每个div，我有主题div div，回复和关闭按钮，而modal-header div有modal-body用于显示内容。
iframe
我打算使用回复按钮来调用一个功能，该功能将填充＆＃39; To＆＃39;和＆＃39;主题＆＃39; var message1;
function appendMessageRow(message) {
$('.table-inbox tbody').append(
'<tr>\
<td>' + getHeader(message.payload.headers, 'From') + '</td>\
<td>\
<a href="#message-modal-' + message.id +
'" data-toggle="modal" id="message-link-' + message.id + '">' +
getHeader(message.payload.headers, 'Subject') +
'</a>\
</td>\
<td>' + getHeader(message.payload.headers, 'Date') + '</td>\
</tr>'
);
$('body').append(
'<div class="modal fade" id="message-modal-' + message.id +
'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">\
<div class="modal-dialog modal-lg">\
<div class="modal-content">\
<div class="modal-header">\
<h4 class="modal-title" id="myModalLabel">' +
getHeader(message.payload.headers, 'Subject') +
'</h4>\
<button type="button"\
class="close"\
data-dismiss="modal"\
aria-label="Close" style="float:right;">\
<span aria-hidden="true">×</span></button>\
<span></span>\
<a data-toggle="modal" href="#reply-modal" id="reply-button" class="btn btn-primary">Reply</a>\
</div>\
<div class="modal-body">\
<iframe id="message-iframe-' + message.id + '" srcdoc="<p>Loading...</p>">\
</iframe>\
</div>\
</div>\
</div>\
</div>'
);
$('#message-link-' + message.id).on('click', function() {
var ifrm = $('#message-iframe-' + message.id)[0].contentWindow.document;
$('body', ifrm).html(getBody(message.payload));
message1 = message;
});
$('#reply-button).on('
click ',function(){
$("#reply-to").val(getHeader(message1.payload.headers, 'From')); $("#reply-subject").val('RE: ' + getHeader(message1.payload.headers, 'Subject')); $("#message-modal-" + message1.id).fadeOut(); $('div.modal-backdrop.fade.in').fadeOut();
});
}（回复按钮是 a 标记，带有href =＃reply-modal ）中的字段，在{{1}后可见} div淡出。问题是我无法得到我需要淡出的div的id（以及那个灰色的背景）。
此外，如果您看到我需要整个reply-modal对象，而不是所点击的消息链接的message-modal-message.id，那么我就可以转移＆＃39; To＆＃39;和＆＃39;主题＆＃39;到新出现的message div。但它只是没有获得点击消息的message.id，而是收件箱页面上显示的邮件列表中的最后一个消息，因此reply-modal不会淡出{ {1}}不正确。同样，＆＃39; To＆＃39;和＆＃39;来自＆＃39; message.id div中的字段还包含列表中最后一封邮件的信息 - 与您打开的邮件无关。同样，#message-modal-message.id div不会消失，message.id div会出现在它后面，我必须关闭它div才能看到reply-modal div。
我甚至尝试在外部使用JS函数而不是jQuery选择器方法message-modal-message.id但是不能这样做。
基本上， 如何在打开邮件进行查看后获取邮件对象？
1 个答案:
答案 0 :(得分：0)
这正是我所说的。抱歉，如果在尝试理解问题时造成某种混淆，我也无法在问题中粘贴整个代码。
＆＃39;回复＆＃39;按钮需要为我们添加为div的每条消息添加到显示页面，该页面还使用两个关键变量reply-to和reply-subject来传递打开的新回复表单中需要的数据。
关闭＆＃39;显示消息＆＃39;之前不可能的div也与message-id相关联，现在可以访问它。
其他一切都非常整洁;发送回复所需的功能与发送新电子邮件相同，并且出现在代码的最后。
我无法做的是点击＆＃34;回复＆＃34;捕获当前显示的消息的消息ID。按钮。这是一个更好的＆＃34;解决方案而不是解决方法，但如果我能做到我想要的事情，那么男人会更短！
<!doctype html>
<html>
<head>
<title>Gmail API demo</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style>
iframe {
width: 100%;
border: 0;
min-height: 80%;
height: 600px;
display: flex;
}
</style>
</head>
<body>
<div class="container">
<h1>Gmail API demo</h1>
<button id="authorize-button" class="btn btn-primary hidden">Authorize</button>
<a href="#compose-modal" data-toggle="modal" id="compose-button" class="btn btn-primary pull-right hidden">Compose</a>
<table class="table table-striped table-inbox hidden">
<thead>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date/Time</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="modal fade" id="compose-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Compose</h4>
</div>
<form onsubmit="return sendEmail();">
<div class="modal-body">
<div class="form-group">
<input type="email" class="form-control" id="compose-to" placeholder="To" required />
</div>
<div class="form-group">
<input type="text" class="form-control" id="compose-subject" placeholder="Subject" required />
</div>
<div class="form-group">
<textarea class="form-control" id="compose-message" placeholder="Message" rows="10" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" id="send-button" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="reply-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Reply</h4>
</div>
<form onsubmit="return sendReply();">
<div class="modal-body">
<div class="form-group">
<input type="email" class="form-control" id="reply-to" required disabled/>
</div>
<div class="form-group">
<input type="text" class="form-control" id="reply-subject" required />
</div>
<div class="form-group">
<textarea class="form-control" id="reply-message" placeholder="Message" rows="10" required></textarea>
</div>
</div>
<input type="hidden" id="reply-message-id" />
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" id="reply-button" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="withinViewport.js"></script>
<script src="jquery.withinviewport.js"></script>
<script type="text/javascript">
var clientId = 'YOUR_CLIENT_ID.apps.googleusercontent.com';
var apiKey = 'YOUR_API_KEY';
var scopes = 'https://www.googleapis.com/auth/gmail.readonly';
function handleClientLoad() {
gapi.client.setApiKey(apiKey);
window.setTimeout(checkAuth, 1);
}
function checkAuth() {
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: true
}, handleAuthResult);
}
function handleAuthClick() {
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: false
}, handleAuthResult);
return false;
}
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
loadGmailApi();
$('#compose-button').removeClass("hidden");
$('#authorize-button').remove();
$('.table-inbox').removeClass("hidden");
} else {
$('#authorize-button').removeClass("hidden");
$('#authorize-button').on('click', function() {
handleAuthClick();
});
}
}
function loadGmailApi() {
gapi.client.load('gmail', 'v1', displayInbox);
}
function displayInbox() {
var request = gapi.client.gmail.users.messages.list({
'userId': 'me',
'labelIds': 'INBOX',
'maxResults': 10
});
request.execute(function(response) {
$.each(response.messages, function() {
var messageRequest = gapi.client.gmail.users.messages.get({
'userId': 'me',
'id': this.id
});
messageRequest.execute(appendMessageRow);
});
});
}
function appendMessageRow(message) {
var reply_to = (getHeader(message.payload.headers, 'Reply-to') !== '' ? getHeader(message.payload.headers, 'Reply-to') : getHeader(message.payload.headers, 'From')).replace(/\"/g, '"');
var reply_subject = 'Re: ' + getHeader(message.payload.headers, 'Subject').replace(/\"/g, '"');
$('.table-inbox tbody').append(
'<tr>\
<td>' + getHeader(message.payload.headers, 'From') + '</td>\
<td>\
<a href="#message-modal-' + message.id +
'" data-toggle="modal" id="message-link-' + message.id + '">' +
getHeader(message.payload.headers, 'Subject') +
'</a>\
</td>\
<td>' + getHeader(message.payload.headers, 'Date') + '</td>\
</tr>'
);
$('body').append(
'<div class="modal fade" id="message-modal-' + message.id +
'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">\
<div class="modal-dialog modal-lg">\
<div class="modal-content">\
<div class="modal-header">\
<h4 class="modal-title" id="myModalLabel">' +
getHeader(message.payload.headers, 'Subject') +
'</h4>\
<button type="button"\
class="close"\
data-dismiss="modal"\
aria-label="Close" style="float:right;">\
<span aria-hidden="true">×</span></button>\
<span></span>\
</div>\
<div class="modal-body">\
<iframe id="message-iframe-' + message.id + '" srcdoc="<p>Loading...</p>">\
</iframe>\
<div class="modal-footer">\
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>\
<button type="button" class="btn btn-primary reply-button" data-dismiss="modal" data-toggle="modal" data-target="#reply-modal"\
onclick="fillInReply(\'' + reply_to + '\',\'' + reply_subject + '\',\'' + getHeader(message.payload.headers, 'Message-ID') + '\');">Reply</button>\
</div> \
</div>\
</div>\
</div>\
</div>'
);
$('#message-link-' + message.id).on('click', function() {
var ifrm = $('#message-iframe-' + message.id)[0].contentWindow.document;
$('body', ifrm).html(getBody(message.payload));
});
}
function getHeader(headers, index) {
var header = '';
$.each(headers, function() {
if (this.name === index) {
header = this.value;
}
});
return header;
}
function getBody(message) {
var encodedBody = '';
if (typeof message.parts === 'undefined') {
encodedBody = message.body.data;
} else {
encodedBody = getHTMLPart(message.parts);
}
encodedBody = encodedBody.replace(/-/g, '+').replace(/_/g, '/').replace(/\s/g, '');
return decodeURIComponent(escape(window.atob(encodedBody)));
}
function getHTMLPart(arr) {
for (var x = 0; x <= arr.length; x++) {
if (typeof arr[x].parts === 'undefined') {
if (arr[x].mimeType === 'text/html') {
return arr[x].body.data;
}
} else {
return getHTMLPart(arr[x].parts);
}
}
return '';
}
function sendEmail() {
$('#send-button').addClass('disabled');
sendMessage({
'To': $('#compose-to').val(),
'Subject': $('#compose-subject').val()
},
$('#compose-message').val(),
composeTidy
);
return false;
}
function sendMessage(headers_obj, message, callback) {
var email = '';
for (var header in headers_obj)
email += header += ": " + headers_obj[header] + "\r\n";
email += "\r\n" + message;
var sendRequest = gapi.client.gmail.users.messages.send({
'userId': 'me',
'resource': {
'raw': window.btoa(email).replace(/\+/g, '-').replace(/\//g, '_')
}
});
return sendRequest.execute(callback);
}
function fillInReply(to, subject, message_id) {
$('#reply-to').val(to);
$('#reply-subject').val(subject);
$('#reply-message-id').val(message_id);
}
function sendReply() {
$('#reply-button').addClass('disabled');
sendMessage({
'To': $('#reply-to').val(),
'Subject': $('#reply-subject').val(),
'In-Reply-To': $('#reply-message-id').val()
},
$('#reply-message').val(),
replyTidy
);
return false;
}
function replyTidy() {
$('#reply-modal').modal('hide');
$('#reply-message').val('');
$('#reply-button').removeClass('disabled');
}
function composeTidy() {
$('#compose-modal').modal('hide');
$('#compose-to').val('');
$('#compose-subject').val('');
$('#compose-message').val('');
$('#send-button').removeClass('disabled');
}
</script>
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
</body>
</html>
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？