Calendly Widget在IE(Angular App)中不起作用 [英] Calendly Widget not working in IE (Angular App)
问题描述
我将Calendly小部件嵌入到一个简单的Angular应用程序中.它可以在Chrome，Firefox和Edge中使用，但在IE中仅显示一个空白的白框.
I am embedding a Calendly widget into a simple Angular application. It works in Chrome, Firefox, and Edge, but just shows a blank white box in IE.
该网站的工作网址为 https://cei-demo.firebaseapp. com/schedule-an-appointment
我尝试使用innerHTML从组件而不是模板中呈现HTML代码.我遇到了同样的问题.
I have tried using innerHTML to render the HTML code from the component and not in the template. I had the same problem.
calendly.component.html
calendly.component.html
<div class="my-5 p-3 container bg-white text-dark">
<div class="calendly-inline-widget" data-url="https://calendly.com/test-cei" style="min-width:320px;height:700px;"></div>
</div>
index.html(在body标签上方)
index.html (right above the body tag)
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
我希望该小部件在所有浏览器中显示.
I would like the widget to display in all browsers.
以下是回应Dmitry Pashkevich的代码:
Here is the code in response to Dmitry Pashkevich below:
component.ts
component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-calendly',
templateUrl: './calendly.component.html',
styleUrls: ['./calendly.component.css']
})
export class CalendlyComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
component.html
component.html
<div class="my-5 p-3 container bg-white text-dark">
<div class="calendly-inline-widget" style="min-width:320px;height:580px;" data-auto-load="false">
</div>
index.html
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Carbon Emery Insurance</title>
<base href="/">
<!-- reCaptcha -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
<!-- Bootstrap js -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<script>
Calendly.initInlineWidget({
url: 'https://calendly.com/test-cei',
parentElement: document.querySelector('.calendly-inline-widget'),
});
</script>
</body>
</html>
推荐答案
欢迎使用StackOverflow @ wingej0.
Welcome to StackOverflow, @wingej0.
有一个特殊的JavaScript API，用于从Angular，React等单页应用程序中调用Calendly小部件.使用此API，您可以精确地控制何时要初始化小部件，而不必在页面加载时进行初始化.
There is a special JavaScript API for invoking Calendly widgets from single-page applications in Angular, React, etc. With this API, you can control exactly when you want the widget to be initialized, instead of having it initialize upon page load.
首先，将data-auto-load="false"属性添加到.calendly-inline-widget并删除data-url属性.因此元素应如下所示:
First, add a data-auto-load="false" attribute to the .calendly-inline-widget and remove the data-url attribute. So the element should look like this:
<div class="calendly-inline-widget" style="min-width:320px;height:580px;" data-auto-load="false">
然后，在要初始化Calendly小部件之后执行以下代码:
Then, execute this code after when you want to initialize the Calendly widget:
Calendly.initInlineWidget({
url: 'https://calendly.com/test-cei',
parentElement: document.querySelector('.calendly-inline-widget'),
});
此处有更多文档: Calendly Advanced嵌入选项
如上所述，为了动态创建Calendly嵌入窗口小部件，我们需要做两件事:
As outlined above, in order to dynamically create a Calendly embed widget, we need two things:
- 创建一个容器元素，该日历元素将由Calendly Embed API呈现到其中
- 调用Calendly Embed API
这两件事完美地结合在一个组件中:
These two things combine perfectly in a Component:
import {
Component,
NgModule,
VERSION,
ElementRef,
ViewChild
} from '@angular/core'
@Component({
selector: 'app-calendly-widget',
template: `
<div #container class="calendly-inline-widget" style="min-width:320px;height:580px;" data-auto-load="false"></div>
`
})
export class CalendlyWidgetComponent {
@ViewChild('container') container: ElementRef;
ngOnInit() {
Calendly.initInlineWidget({
url: 'https://calendly.com/test-cei',
parentElement: this.container.nativeElement
});
}
上面的代码(TypeScript)定义了一个呈现容器的组件，并在初始化后立即调用Calendly Embed API.我们使用 Angular的@ViewChild 来访问组件呈现的原始DOM元素.
The above code (TypeScript) defines a component that renders the container and immediately calls the Calendly Embed API upon initialization. We use Angular's @ViewChild to access the raw DOM element that the component renders.
这是一个有效的演示: https://plnkr.co/edit/mpl6l8ifxc1amS611DMD?p=preview (请注意，它使用的是比您使用的旧版本的Angular，如果您有兼容性问题，请告诉我)
Here's a working demo: https://plnkr.co/edit/mpl6l8ifxc1amS611DMD?p=preview (note that it uses an older version of Angular than you're using, let me know if you have compatibility issues)
这篇关于Calendly Widget在IE(Angular App)中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
