获取 Docusign 嵌入式焦点视图的无限旋转器
问题描述 投票：0回答：1
我正在尝试构建一个自定义元素，以将 docusign 文档的聚焦视图放入 elm 应用程序中。它几乎可以工作，但在应用程序中，我只是在右下角看到一个无限旋转器和一个“由 docusign 提供支持”的徽标。
我想知道问题是否出在上游，因为当我尝试直接将嵌入网址粘贴到浏览器中时，它会直接转到重定向网址。不知道去哪里看看到底发生了什么。
https://developers.docusign.com/docs/esign-rest-api/how-to/request-signature-focused-view/
customElements.define('docusign-signature',
class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
console.log('Connected callback triggered');
this.render();
}
attributeChangedCallback(name, oldValue, newValue) {
console.log(`Attribute changed: ${name}, Old value: ${oldValue}, New value: ${newValue}`);
this.render();
}
static get observedAttributes() {
return ['url', 'integration-key'];
}
render() {
console.log('Render method called');
const url = this.getAttribute('url');
const integrationKey = this.getAttribute('integration-key');
console.log('URL:', url);
console.log('Integration Key:', integrationKey);
if (!url || !integrationKey) {
console.log('Missing required attributes');
this.shadowRoot.innerHTML = 'Missing required attributes';
return;
}
const style = document.createElement('style');
style.textContent = `
.docusign-agreement {
width: 100%;
height: 800px;
}
`;
this.shadowRoot.appendChild(style);
const agreementDiv = document.createElement('div');
agreementDiv.className = 'docusign-agreement';
agreementDiv.id = 'agreement';
this.shadowRoot.appendChild(agreementDiv);
const script = document.createElement('script');
script.src = 'https://js.docusign.com/bundle.js';
script.onload = () => {
console.log('DocuSign script loaded');
window.DocuSign.loadDocuSign(integrationKey)
.then((docusign) => {
console.log('DocuSign loaded successfully');
const signing = docusign.signing({
url: url,
displayFormat: 'focused',
style: {
branding: {
primaryButton: {
backgroundColor: '#333',
color: '#fff'
}
},
signingNavigationButton: {
finishText: 'You have finished the document! Hooray!',
position: 'bottom-center'
}
}
});
signing.on('ready', (event) => {
console.log('UI is rendered');
});
signing.on('sessionEnd', (event) => {
console.log('sessionend', event);
});
signing.mount(this.shadowRoot.querySelector('#agreement'));
})
.catch((ex) => {
console.error('Error loading DocuSign:', ex);
});
};
this.shadowRoot.appendChild(script);
}
}
);
编辑 添加下面每个问题的相关 HAR 文件内容
"cache": {},
"connection": "976400",
"request": {
"method": "GET",
"url": "https://demo.docusign.net/Signing/RasterizerImage.aspx?insession=1&ti=7e2359c830454567a88c60fe6b75ce97&p=5&d=150&pid=b1aff4b7-0888-4195-a695-d1cf983cb8b6&vm=false",
"httpVersion": "HTTP/1.1",
"headers": [
{
"name": "Accept",
"value": "image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8"
},
{
"name": "Accept-Encoding",
"value": "gzip, deflate, br"
},
{
"name": "Accept-Language",
"value": "en-US,en;q=0.9"
},
{
"name": "Connection",
"value": "keep-alive"
},
{
"name": "Cookie",
"value": "drift_aid=bdd6ff22-9e95-4fb8-b904-e904955798f1; driftt_aid=bdd6ff22-9e95-4fb8-b904-e904955798f1; drift_eid=84225428-aa42-4559-8614-f3c8befbbf90; pv=DA4DFE71_7801; ssid=deg4dob3hltz3vzaefbvqjim; MemberConsoleMobile=; __RequestVerificationToken_L1NpZ25pbmc1=AUg7xNmdsECMOXs8jueYqMkB0; DSSessionAttributes=EnvelopeId:7addcbc5-ffb4-4a25-a7f2-e092fc4f73ca,SenderAccountId:0a060a89-b542-4301-90b4-d45c7d5ef06e,RecipientAccountId:cccccccc-cccc-cccc-cccc-cccccccccccc,RecipientId:0e8a037b-5627-41d7-a5f5-9b2fa47b6e40"
},
{
"name": "DNT",
"value": "1"
},
{
"name": "Host",
"value": "demo.docusign.net"
},
{
"name": "Referer",
"value": "https://demo.docusign.net/Signing/?insession=1&ti=7e2359c830454567a88c60fe6b75ce97"
},
{
"name": "Sec-Fetch-Dest",
"value": "image"
},
{
"name": "Sec-Fetch-Mode",
"value": "no-cors"
},
{
"name": "Sec-Fetch-Site",
"value": "same-origin"
},
{
"name": "User-Agent",
"value": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 OPR/107.0.0.0"
},
{
"name": "sec-ch-ua",
"value": "\"Not A(Brand\";v=\"99\", \"Opera GX\";v=\"107\", \"Chromium\";v=\"121\""
},
{
"name": "sec-ch-ua-mobile",
"value": "?0"
},
{
"name": "sec-ch-ua-platform",
"value": "\"macOS\""
}
],
"queryString": [
{
"name": "insession",
"value": "1"
},
{
"name": "ti",
"value": "7e2359c830454567a88c60fe6b75ce97"
},
{
"name": "p",
"value": "5"
},
{
"name": "d",
"value": "150"
},
{
"name": "pid",
"value": "b1aff4b7-0888-4195-a695-d1cf983cb8b6"
},
{
"name": "vm",
"value": "false"
}
],
"cookies": [
{
"name": "drift_aid",
"value": "bdd6ff22-9e95-4fb8-b904-e904955798f1",
"path": "/",
"domain": ".docusign.net",
"expires": "2025-04-11T00:46:52.772Z",
"httpOnly": false,
"secure": true,
"sameSite": "None"
},
{
"name": "driftt_aid",
"value": "bdd6ff22-9e95-4fb8-b904-e904955798f1",
"path": "/",
"domain": ".docusign.net",
"expires": "2025-04-11T00:46:52.772Z",
"httpOnly": false,
"secure": true,
"sameSite": "None"
},
{
"name": "drift_eid",
"value": "84225428-aa42-4559-8614-f3c8befbbf90",
"path": "/",
"domain": ".docusign.net",
"expires": "1969-12-31T23:59:59.000Z",
"httpOnly": false,
"secure": true,
"sameSite": "None"
},
{
"name": "pv",
"value": "DA4DFE71_7801",
"path": "/",
"domain": "demo.docusign.net",
"expires": "1969-12-31T23:59:59.000Z",
"httpOnly": true,
"secure": true,
"sameSite": "None"
},
{
"name": "ssid",
"value": "deg4dob3hltz3vzaefbvqjim",
"path": "/",
"domain": "demo.docusign.net",
"expires": "1969-12-31T23:59:59.000Z",
"httpOnly": true,
"secure": true,
"sameSite": "None"
},
{
"name": "MemberConsoleMobile",
"value": "",
"path": "/",
"domain": "demo.docusign.net",
"expires": "1969-12-31T23:59:59.000Z",
"httpOnly": false,
"secure": true,
"sameSite": "None"
},
{
"name": "__RequestVerificationToken_L1NpZ25pbmc1",
"value": "AUg7xNmdsECMOXs8jueYqMkB0",
"path": "/",
"domain": "demo.docusign.net",
"expires": "1969-12-31T23:59:59.000Z",
"httpOnly": true,
"secure": true,
"sameSite": "None"
},
{
"name": "DSSessionAttributes",
"value": "EnvelopeId:7addcbc5-ffb4-4a25-a7f2-e092fc4f73ca,SenderAccountId:0a060a89-b542-4301-90b4-d45c7d5ef06e,RecipientAccountId:cccccccc-cccc-cccc-cccc-cccccccccccc,RecipientId:0e8a037b-5627-41d7-a5f5-9b2fa47b6e40",
"path": "/",
"domain": "demo.docusign.net",
"expires": "1969-12-31T23:59:59.000Z",
"httpOnly": true,
"secure": true,
"sameSite": "None"
}
],
"headersSize": 1309,
"bodySize": 0
},
"response": {
"status": 200,
"statusText": "OK",
"httpVersion": "HTTP/1.1",
"headers": [
{
"name": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
},
{
"name": "Content-Length",
"value": "138926"
},
{
"name": "Content-Type",
"value": "image/gif"
},
{
"name": "Date",
"value": "Tue, 12 Mar 2024 18:11:07 GMT"
},
{
"name": "Referrer-Policy",
"value": "strict-origin-when-cross-origin"
},
{
"name": "Set-Cookie",
"value": "pv=DA4DFE71_7801; path=/; secure; HttpOnly; SameSite=None"
},
{
"name": "Strict-Transport-Security",
"value": "max-age=31536000; includeSubDomains; preload"
},
{
"name": "X-Content-Type-Options",
"value": "nosniff"
},
{
"name": "X-DocuSign-Node",
"value": "DA4DFE71"
},
{
"name": "X-XSS-Protection",
"value": "1; mode=block"
}
],
"cookies": [
{
"name": "pv",
"value": "DA4DFE71_7801",
"path": "/",
"domain": "demo.docusign.net",
"expires": null,
"httpOnly": true,
"secure": true,
"sameSite": "None"
}
],
"content": {
"size": 138926,
"mimeType": "image/gif",
"compression": 0,
"text": "R0lGODlh+wRyBvcAAAAAAA8PDxAQEB8fHyMfICYgFigiGCokGiwmHS4oHyAgIC8pIC4sKC8uLjAqITIsIjMuJDQuJTAtLjYwJzcxKDgzKjk0Kzo1LDw2LT04LzAwMD45MD06Oz47PD8/P10YEUA7MkE8M0I8NEQ+NUVAN0ZBOEhCOklEPExHP0xIP0BAQEVFRU5JQUtISUxJSk9PT1BLQ1JNRVROR1VQSFhTS1pWTlBQUFRUVFlWV1xXUFpXWF1YUV9fX2JdVmRfWGRgWWdjXGlkXWBgYGZkZGhlZG5qY2tram9taW9vb3BsZnJuaHRvaXFucnRxanZybHh0bnBwcHVyc3VzdHR0dHp2cHt4cXx4cn56dH9/f4B8doF+eKBeWbtaVtcoJuobGv8AAP8ODv8QEP8XF/8aGv8fH/8gIP8kJP8vL/8wMP81Nf85Of8+PutMTPdHRv9AQP9FRf9JSf9PT/9QUP9XV/9ZWf9fX+FwbvFgYP9gYP9kZP9oaP9vb/9wcP91df96ev9+foSAeoWBfIeEfoiFf4GAgoqGgYuIg42KhY+MhouLi4+Pj5CNh5GOiZCOj5GPkJOQi5WSjpCQkJeUkJSUlJiVkJuYk5uZlJ2alp6cl5+cmJ6enqCdmaOhnKKgoaakoaimoqmoo6qopKyqpqurqayqqq2rrK6sqK+vr7CuqrKvrLKwrbSyrrCwsLa0sbi2s7m3tLq4tby6t7m4ub27uL28ub6+vsC+u/+AgP+Ghv+Kiv+Pj/+QkP+Vlf+amv+env+goP+qqv+urv+wsP++vsLAvcDAwMTDwMbEwsfGx8jGw8jHxM7Aw.......(very long)
控制台还记录：
1个回答
0
投票
投票
聚焦视图库会搜索在屏幕上安装后加载信封的 iframe。当您将其注册为影子根时，无法找到它。我找到了一个解决方案来删除影子根的使用并将其注册为常规 DOM 元素。
- 从构造函数中删除了 this.attachShadow({ mode: 'open' }) 更改了
- this.shadowRoot 声明以仅使用 this 为
- signing.mount方法提供了agreementDiv
请检查这是否适合您！ ;D
最新问题
- 为什么我的 SVG 图像在本地可以正常工作，但当我在 GitHub 上查看“原始”图像时就会中断？
- 当自动提交设置为 false 时，Kafka 监听器开始消费消息时如何重新传递消息
- 为什么当将第一个字符串元素传入 bool 数组时，该元素总是等于数组的长度？
- Linux 中的 Select 循环 - 如何让它变得更好？
- 如何解决任务':app:compileFlutterBuildDebug'执行失败。运行 flutter 应用程序时
- 如何使用 select() 让服务器监听多个端口？
- g++ 版本标志未正确切换 c++ 版本
- recvmsg 在 NETLINK 套接字上进行选择
- 将 postgres 间隔正确格式化为 HH:MM
- 使用Word VBA宏根据第一个字符设置多个单词的样式
- 如何使用libreadline在套接字上进行选择？
- 升级到 Maui 后，在 Xamarin.Android.Tasks.XAJavaTypeScanner.GetJavaTypes 处构建异常“错误 XAGJS7001：System.NullReferenceException”
- select() 调用常规文本文件的文件描述符
- 为什么手动更改.gitmodules不起作用？
- select() 返回时没有传入连接
- Linux C select：管道回显输入有效，但从键盘读取无效？
- SwiftUI 设计背景图片问题
- 在 UILabel IOS 的特定部分添加文本“...阅读更多”
- 为什么 select() 不尊重超时，尤其是在多线程中
- 为什么文件描述符 1 和 2 可以在手动输入时读取，但在输入重定向时却不能读取？
© www.soinside.com 2019 - 2024. All rights reserved.