我遇到了一个非常具体的问题(实际上是 2 个问题,但我相信它们是相关的),并希望有人能对正在发生的事情有所了解。
我有一个 Meteor 应用程序在 Adobe Digital Publishing Suite (DPS) 文章的 HTML 覆盖层内运行。我已经用尽可能简单的配置对此进行了测试,并且能够始终如一地重现该问题。
概述
1- Meteor 在移动 Safari 和 iPad(第 3 代,ios 6.1.7)上的移动 Chrome 中运行良好,但 Adobe DPS 文章内部的渲染会产生错误:
类型错误:“未定义”不是函数
虽然此错误不会影响渲染,但我相信它与我的第二个问题有关:
2- 从 facebook 身份验证(alt./非 JSSDK 流)重定向后,页面根本不会呈现,但除了上面的 #1 之外没有其他错误消息。
代码示例/详细信息
1.“无头”浏览器
我在一篇文章中使用 HTML 覆盖,在 InDesign 中设置并使用 Folio Producer 发布到 DPS。叠加层指向一个测试 url(例如http://dmx.dod.fbchat.meteor.com),并且每次看到文章的特定页面时都会刷新。浏览器的详细信息如下:
appVersion: 5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329
userAgent: Mozilla/5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329
我知道这个浏览器有一些限制(例如,alert = null;
),它被认为是“无头”,因为它不是 chrome 或 safari 的合法版本,没有地址栏等。
2.重定向是通过以下方法实现的
- 创建一个全新的 Meteor 项目(例如
meteor create DPSFBRender
) - 决定你要从中托管它的流星 uri(例如
dmx.dod.fbchat.meteor.com
) - 在 facebook ( https://developers.facebook.com/apps )上创建一个应用程序,记下 App ID。
- 将您的流星 uri 添加到域和 facebook 上的重定向 uri。例如:
领域:
dmx.dod.fbchat.meteor.com
重定向 uri: http ://dmx.dod.fbchat.meteor.com/
将以下两行添加到默认流星项目 js 文件中按钮的单击事件:
var randID = Meteor.uuid(); window.location.href = 'https://www.facebook.com/dialog/oauth?client_id=[FB APP ID]&redirect_uri=[URL WHERE YOU'LL HOST TEST]&state='+randID+'&response_type=token&scope=[LIST OF PERMISSIONS];
因此,例如,如果我的测试 URL 是dmx.dod.fbchat.meteor.com
,我的 FB 应用程序 ID 是514080555337856
并且我的权限列表很长(见下文),我的第二行将如下所示:
var randID = Meteor.uuid();
window.location.href = 'https://www.facebook.com/dialog/oauth?client_id=514080555337856&redirect_uri=http://dmx.dod.fbchat.meteor.com/&state='+randID+'&response_type=token&scope=create_note,email,friends_about_me,friends_actions.books,friends_actions.music,friends_actions.news,friends_actions.video,friends_activities,friends_birthday,friends_education_history,friends_events,friends_games_activity,friends_groups,friends_hometown,friends_interests,friends_likes,friends_location,friends_notes,friends_photo_video_tags,friends_photos,friends_questions,friends_relationship_details,friends_relationships,friends_religion_politics,friends_status,friends_subscriptions,friends_videos,friends_website,friends_work_history,photo_upload,publish_actions,publish_stream,read_friendlists,read_mailbox,share_item,status_update,user_about_me,user_friends,user_groups,user_interests,user_photos,user_relationship_details,user_status,video_upload,xmpp_login';
将您的流星应用程序部署到测试 uri(例如
meteor deploy dms.dod.fbchat.meteor.com
)将您的 DPS 文章中的 html 覆盖指向您的 URL
部署/发布您的文章,在 iPad 上的 DPS 查看器中打开它,然后单击按钮以激活重定向。
系统将提示您允许 FB 应用程序权限,接受。
您将被导航回您的流星 url,但该页面不会出现。
如果您更改文章页面,退出文章并重新进入,或者只是调出您的应用栏,然后返回文章,页面将刷新并呈现。
只要您设置了权限(只要没有提示您接受),页面就会呈现正常。只有在自定义登录和后续重定向的 FB 提示后,页面才会呈现。
如果您想再次测试它,请在常规浏览器中登录您的 fb 帐户,然后删除该应用程序。
3. 调试/发现
我开始使用 debuggify 进行调试,那时我能够看到TypeError: 'undefined' is not a function
错误。乍一看,它并没有阻止任何东西的渲染,但我相信重定向是罪魁祸首(见下面的想法部分)。
此错误将出现在DPS 覆盖内呈现的任何流星页面上。它不必是重定向,也不必包含任何内容。您可以简单地创建一个新的流星项目,部署它,将 DPS 中的 HTML 覆盖指向它,然后会出现错误(只有使用像 debuggify 这样的远程调试工具才能注意到)。
同样, IOS safari 移动浏览器或 chrome 浏览器内部也不会发生此错误。上述从 FB 重定向后的渲染问题也将在两种浏览器中正常工作(页面将在“接受权限”屏幕后渲染)。
该'undefined'...
错误没有堆栈跟踪:
堆栈: TypeError:“未定义”不是函数?( http://dmx.dod.fbchat.meteor.com/:1:0 )
..虽然我们知道它发生在加载事件之后:
发生:加载后
想法
我认为这可能是 Meteor 中固有的动态 JS 加载与重定向相结合的组合。简单地说,重定向没有等待足够长的时间让 JS 加载(尤其是把手),因此它没有呈现。
我不相信整个页面都被关闭了,因为在我的应用程序(不是测试)中,我正在获取 URL 哈希中的应用程序密钥,并成功存储它。所以,我知道 Javascript 并没有在页面上完全关闭。由于某种原因,它只是渲染部分不起作用。
我相信
'undefined' is not a function
错误是相关的 - 可能是 Jquery、Handlebars、DDP ......某些东西没有按预期加载。在正常的页面加载(例如刷新)上,浏览器正在克服这个问题。在来自 FB 的重定向中,它不是。它可能与嵌入式 DPS 浏览器的 JS/浏览器限制有关。Adobe 限制了某些功能(出于安全和性能原因),也许他们正在关闭流星需要运行的某些功能。
我尝试过的解决方法:
- 使用默认 Meteor FB 登录 - 无法识别“无头浏览器”,并且无论如何在 DPS 中都不允许弹出窗口。
- 使用来自 FB 的标准 JSSDK 登录流程——同样的交易,不允许弹出窗口
想法?
所以,在这一点上,我对任何事情都持开放态度,即使它不能解决这个具体问题。
解决方法,您遇到的类似问题,想法,关于为什么这可能会在重定向上发生但不正常的猜测等。
我知道可能有几种方法可以给这只猫剥皮,但我现在被困住了,很想听听一些建议。我只需要在 DPS 内登录 FB 即可工作。我不在乎如何,即使所有代码都是客户端(这只是一个测试,而不是生产系统)
我什至考虑过尝试编辑流星中的accounts-facebook和accounts-base包以识别无头浏览器,但甚至不知道从哪里开始......
此外,'undefined'...
无论如何,该错误都会发生在 DPS 文章中的每个流星页面上。这很烦人,并且可能对一些移动无头浏览器兼容性改进有用,如果有人知道它为什么会发生的话。
也欢迎跟进。我会监视这个线程。