internet-explorer - Calendly 小部件在 IE 中不起作用(Angular 应用程序)

转载作者：行者123 更新时间：2023-12-01 21:57:13

24

4

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

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

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

日历组件.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 标签正上方)

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

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

下面是响应 Dmitry Pashkevich 的代码:

组件.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() {
  }
}

组件.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>

最佳答案

欢迎来到 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;" data-auto-load="false">

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

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

此处提供更多文档:Calendly Advanced embed options

将其包装在 Angular 组件中

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

创建一个容器元素，Calendly iframe 将由 Calendly Embed API 呈现到该元素中
调用 Calendly Embed API

这两个东西在组件中完美结合:

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's @ViewChild访问组件呈现的原始 DOM 元素。

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

关于internet-explorer - Calendly 小部件在 IE 中不起作用(Angular 应用程序)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55973983/

24

4

0

文章推荐： angular - 部署在 NX monorepo 中创建的 nestjs 服务器

文章推荐： r - 使用 knit 和 Rstudio 自动调整 LaTeX 表格宽度以适合 pdf

文章推荐： python-3.x - Tensorflow 无效形状 (InvalidArgumentError)

internet-explorer - 在同一台计算机上运行 Internet Explorer 6、Internet Explorer 7 和 Internet Explorer 8
像其他人一样，我需要在 Internet Explorer 6 和 Internet Explorer 7 上测试我的代码。现在，Internet Explorer 8 为开发人员提供了一些很棒的工具
internet-explorer - Internet Explorer 8 和 Internet Explorer 6 并排
这个问题在这里已经有了答案: 10年前关闭。 Possible Duplicate: Running Internet Explorer 6, Internet Explorer 7, and Int
internet-explorer - 如何从 Internet Explorer 11 降级到 Internet Explorer 10？
作为一名开发者，我发现新的 Internet Explorer 版本完全是一场噩梦。我关闭了 Windows 功能，但无法安装 Internet Explorer 10 。它说它已经安装，但事实并非如
internet-explorer - 博客URL崩溃Internet Explorer
我通过Blogger有一个博客-http://www.concertexperiencepeeps.com。每当我尝试通过Internet Explorer查看我的博客时，该页面都会崩溃，并且不允许我
internet-explorer-6 - Internet Explorer 6 和 Internet Explorer 7 在同一台计算机上进行调试
这个问题在这里已经有了答案: 10年前关闭。 Possible Duplicate: Running Internet Explorer 6, Internet Explorer 7, and Int
internet-explorer - 为什么即使在模拟 Internet Explorer 8 文档模式时，Internet Explorer 11 也不支持条件注释？
我正在使用新的Internet Explorer 11开发人员工具将文档模式切换为“8”，但条件注释仍然被忽略，也就是说，它们没有被正确解析并且表现得像普通注释。因此，浏览器不会请求/加载条件注释内的
internet-explorer-7 - 是否可以出于调试目的从 Internet Explorer 7 降级到 Internet Explorer 6？
我在我的一个站点上遇到 Internet Explorer 6 问题，我真的希望我安装它而不是 Internet Explorer 7。有没有一种快速的方法来做到这一点？最佳答案下载Microso
javascript - 对于 Internet Explorer 我应该使用什么来使 Internet Explorer 禁用 Internet Explorer 的默认下拉样式
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and t
internet-explorer - 如何从 Powershell 访问 Internet Explorer 运行实例的经典 Internet Explorer COM 自动化对象？
如何访问 Internet Explorer 运行实例的经典 Internet Explorer COM 自动化对象？也就是说，如果我在多个窗口中打开 Internet Explorer，如何从 Po
internet-explorer - Internet Explorer 中带有空格的内容处理附件文件名
string filename = Server.UrlPathEncode(Path.GetFileName(_Filename))); Response.AddHeader("Content-Di
internet-explorer - Internet Explorer 永远等待本地主机
当我尝试使用 Apache 2.2 在 Windows7(64 位)上的 IE9 或 IE10 中打开 localhost 时，解析 URL 需要很长时间。其他浏览器没有问题并立即解析 URL，只有
internet-explorer - 如何从批处理文件打开和关闭 Internet Explorer？
我有一个批处理文件，必须启动 Internet Explorer 并打开 www.google.com .当整个页面加载完成时，它应该终止 IE 进程，即关闭该系统中的所有 IE 实例。我的批处理文件
internet-explorer - Internet Explorer 的测试自动化
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 6 个月前关闭。 Improve t
internet-explorer - Internet Explorer - 浏览时的奇怪形状
基本上，无论我使用 IE 访问哪个网站，我都可以看到那些黑色/白色形状，一旦我将鼠标移到它们上，它们就会消失。想知道是否有人知道可能导致这种情况的原因？另外:http://imageshack.c
internet-explorer - Internet Explorer 在哪里存储它的附加组件？
我检查了所有注册表，但找不到所有已安装扩展的列表。此时，IE 扩展/加载项的任何一般位置都会有所帮助。最佳答案取自 here : 浏览器帮助对象 - 旨在增强浏览器功能的浏览器插件。条目可以在
internet-explorer - 是否可以借助脚本在Internet Explorer 8的LAN设置中更改自动配置脚本地址？
我在Internet Explorer 8的LAN设置中使用了2个不同的自动配置脚本地址。在工作过程中，我需要经常在它们之间进行切换。每次我必须手动进行。有没有一种方法可以通过脚本等自动执行操作，以
internet-explorer - Internet Explorer 平滑滚动检测
这是一个两部分的问题。我正在构建一个网页，我需要知道: 有没有办法检测 IE 是否启用了平滑滚动(如果是，如何)？有没有办法强制 IE 关闭我网页的平滑滚动功能？明确地说，我不是在问如何关闭整个计
internet-explorer - Internet Explorer - 如何强制某些站点的兼容模式？
我想强制 IE10 在 IE9 模式下从我的 Intranet 呈现某些站点。我曾尝试使用本地兼容性列表但无济于事(%LocalAppData%\Microsoft\Internet Explore
internet-explorer - Internet Explorer 正在修改下载文件名
我在使用 IE8 时遇到问题，其中带有查询字符串的 URL 在下载时被破坏。特别是，像这样的 URL http://domain.com/software/Software%202.1%20Beta
internet-explorer - Internet Explorer 缓存文件上传？
我有一个非常基本的页面，其中包括元素。当我提交带有选定文件的表单时，服务器会响应一个在 Excel 中打开的电子表格(“新窗口”)。这种行为意味着初始屏幕和输入元素在 IE 中仍然可见。如果我更改所

首页

博学

6Ren·AI

商城

internet-explorer - Calendly 小部件在 IE 中不起作用(Angular 应用程序)

一般说明

将其包装在 Angular 组件中