Calendly Widget 在 IE 中不起作用(Angular App) [英] Calendly Widget not working in IE (Angular App)

查看：29
本文介绍了Calendly Widget 在 IE 中不起作用(Angular App)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在将 Calendly 小部件嵌入到一个简单的 Angular 应用程序中.它适用于 Chrome、Firefox 和 Edge，但在 IE 中只显示一个空白框.

该网站的工作网址是 https://cei-demo.firebaseapp.com/schedule-an-appointment

我曾尝试使用 innerHTML 从组件而不是在模板中呈现 HTML 代码.我遇到了同样的问题.

calendly.component.html

<div class="calendly-inline-widget" data-url="https://calendly.com/test-cei" style="min-width:320px;height:700px;"></div>

index.html(body 标签正上方)

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>

我希望小部件显示在所有浏览器中.

以下是回复 Dmitry Pashkevich 的代码:

component.ts

import { Component, OnInit } from '@angular/core';@成分({选择器:'app-calendly'，templateUrl: './calendly.component.html',styleUrls: ['./calendly.component.css']})导出类 CalendlyComponent 实现 OnInit {构造函数(){}ngOnInit() {}}

component.html

<div class="calendly-inline-widget" style="min-width:320px;height:580px;"数据自动加载=假">

index.html

<html lang="zh-cn"><头><meta charset="utf-8"><title>碳金刚砂保险</title><base href="/"><!-- reCaptcha --><script src="https://www.google.com/recaptcha/api.js" 异步延迟></script><!-- 自定义字体--><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 核心 CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9TwMcrossorigin="匿名"><!-- 字体真棒--><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28a;<身体><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/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQd1HsFuji="cross"<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+jRMB>jRMB/脚本><script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script><脚本>Calendly.initInlineWidget({url: 'https://calendly.com/test-cei',parentElement: document.querySelector('.calendly-inline-widget'),});</html>

解决方案

欢迎使用 StackOverflow，@wingej0.

有一个特殊的 JavaScript API 用于从 Angular、React 等中的单页应用程序调用 Calendly 小部件.使用此 API，您可以准确控制何时需要初始化小部件，而不是在页面加载时进行初始化.

一般说明

首先，将 data-auto-load="false" 属性添加到 .calendly-inline-widget 并删除 data-url代码>属性.所以元素应该是这样的:

<div class="calendly-inline-widget" style="min-width:320px;height:580px;"数据自动加载=假">

然后，在您想要初始化 Calendly 小部件后执行此代码:

Calendly.initInlineWidget({url: 'https://calendly.com/test-cei',parentElement: document.querySelector('.calendly-inline-widget'),});

此处有更多文档:Calendly 高级嵌入选项

将其包装在 Angular 组件中

如上所述，为了动态创建 Calendly 嵌入小部件，我们需要做两件事:

  1. 创建一个容器元素，Calendly Embed API 将在该元素中呈现 Calendly iframe
  2. 调用 Calendly Embed API

这两件事在一个组件中完美结合:

import {成分，Ng 模块，版本，元素参考，视图子项来自'@angular/core'@成分({选择器:'app-calendly-widget'，模板:`<div #container class="calendly-inline-widget" style="min-width:320px;height:580px;"data-auto-load="false"></div>`})导出类 CalendlyWidgetComponent {@ViewChild('container') 容器:ElementRef;ngOnInit() {Calendly.initInlineWidget({url: 'https://calendly.com/test-cei',parentElement: this.container.nativeElement});}

上面的代码 (TypeScript) 定义了一个组件，该组件呈现容器并在初始化时立即调用 Calendly Embed API.我们使用 Angular 的 @ViewChild 来访问组件的原始 DOM 元素呈现.

这是一个工作演示:https://plnkr.co/edit/mpl6l8ifxc1amS611DMD?p=preview(请注意，它使用的 Angular 版本比您使用的要旧，如果您有兼容性问题，请告诉我)

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.

The working url for the site is https://cei-demo.firebaseapp.com/schedule-an-appointment

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

<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 (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.

Here is the code in response to Dmitry Pashkevich below:

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

<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

<!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>

解决方案

Welcome to StackOverflow, @wingej0.

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.

General instructions

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">

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'),
});

More documentation here: Calendly Advanced embed options

Wrapping it in an Angular component

As outlined above, in order to dynamically create a Calendly embed widget, we need two things:

  1. Create a container element that the Calendly iframe will be rendered into by the Calendly Embed API
  2. Call the 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
      });
    }

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.

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屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆