相关疑难解决方法(0)

如何识别网页是在iframe中加载还是直接加载到浏览器窗口?

我正在写一个基于iframe的Facebook应用程序.现在我想使用相同的html页面来呈现普通网站以及facebook中的画布页面.我想知道我是否可以确定页面是在iframe中加载还是直接在浏览器中加载?

javascript iframe facebook

554
推荐指数
7
解决办法
30万
查看次数

在Javascript中检测iFrame嵌入

我有一个具有特定页面的应用程序 - 让我们称之为页面A.页面A有时是顶级页面,但有时也会嵌入到页面B中的iframe中.所有页面都来自同一台服务器而且没有跨域问题.

我有一个在页面A上运行的greasemonkey脚本.illipmonkey脚本如何检测页面A是否在iframe上下文中?

javascript iframe greasemonkey

54
推荐指数
3
解决办法
5万
查看次数

与react.js聊天小部件

我正在编写一个聊天小部件,它将分发给最终用户,只需要很少的代码放入他们的网站.通常的常规.

我的小部件将用React编写.我知道实现这一目标的几种方法.让我列出我能想到的方式.

  • 提供直接使用iframe和源网址的代码段.这种方法的问题是,只有在嵌入小部件时才能使用它.如果需要弹出窗口小部件,则会失去灵活性.
  • 提供一个代码片段,其中包含异步加载的javascript.Javascript将在父网页中创建一个iframe,并且可以设置src.这个小部件javascript几乎没有智能.这是大多数小部件开发人员遵循的常用方法.

当然,在任何一种情况下,源URL都将呈现一个由webpack捆绑的React页面.

我想知道开发小部件的最佳实践.所以我经历了它的流行实现.我非常喜欢Intercom的小部件.它是用React编写的.我分析了它是如何工作的.最小的javascript在网页上加载异步.它正在注入一个iframeid intercom-frame.它iframe有一个带有源URl的脚本.显然它是React捆绑.

我不明白的是,在这之下iframe,a div创建了三个iframes.一个显示聊天气泡,另一个显示聊天气泡图标,最后一个显示实际的聊天窗口.那些iframe没有源URL,我猜这个包是由widget javascript创建的第一个iframe提供的.

我遇到了这个问题,部分回答了我的问题.从答案来看,

使用窗口消息在您的客户网页和您的iframe之间公开一些API.

然后,第一个脚本异步加载主代码(iframe代码),而不包含在其中.

我不明白的是,

1.)他们如何通过窗口消息实现它?

2.)他们如何设法div用iframe另一个iframe脚本创建一个with s ?小部件javascript不会根据它的来源创建这些元素.它应该由widget js生成的iframe中的React包完成.

3.)一个反应束如何iframe在父DOM中创建反应元素?

javascript widget reactjs

13
推荐指数
1
解决办法
1480
查看次数

标签 统计

javascript ×3

iframe ×2

facebook ×1

greasemonkey ×1

reactjs ×1

widget ×1