LinkedIn 用他们的 JS SDK 做了什么魔术?存在脚本主体和 src,加上奇怪格式的主体
What type of magic is LinkedIn doing with their JS SDK? script body and src are present, plus body in weird format
我想在我的页面上集成LinkedIn分享。
在此处阅读 LinkedIn 提供的文档:
https://developer.linkedin.com/docs/getting-started-js-sdk
.. 我惊讶地发现他们在我的页面的头部部分需要这个脚本标签
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: [API_KEY]
onLoad: [ONLOAD]
authorize: [AUTHORIZE]
lang: [LANG_LOCALE]
</script>
我不明白这里发生了什么。首先,w3schools 说“"Note: If the "src”属性存在,元素必须为空。“””(https://www.w3schools.com/tags/tag_script.asp)。
我也去了这里:https://html.spec.whatwg.org/multipage/scripting.html#the-script-element
(我不是 100% 确定这是多么权威......但是根据格式和长度看起来是权威的:P) - 它也在那里说如果有一个 src
属性,那么正文应该 基本上 是空的 - 在任何情况下 - 这两个资源无法解释 LinkedIn 的脚本语法。
那么有人知道脚本正文语法是怎么回事吗?是那些 JS 标签吗?如果是这样,我不明白它们是如何使用的。我认为标签与 continue/break 语句一起使用,以摆脱循环。如果我以该语法提供信息,我不明白 LinkedIn 的 API 如何从我那里获取信息。
脚本主体是否以某种方式提供给脚本,并由它自己解析?
谁能给我解释一下这是怎么回事?
谢谢!
你说的对。添加 src
属性时,不会执行 script
的主体。然而,有一种方法可以解决这个问题。这是通过检索脚本标记、提取 innerHTML
并在其上使用 eval
来实现的。您当然需要在文档准备好时执行此操作。
我不知道 LinkedIn 到底是怎么做到的,但是 HTML 标准没有改变,加载顺序也没有改变,所以他们要么使用与我解释的类似的东西,要么使用更聪明的方法解析脚本主体。
需要考虑的其他注意事项:您可以将其绑定到您的库中,而不是使用文档就绪事件。就像检索最后一个可用的脚本标签并提取正文一样,在您的库加载时,这将是最后一个以任何方式加载的元素,因此您应该能够在不使用任何事件的情况下检索代码。 (这需要测试,但是 DOM 元素是同步加载的,自上而下的方法)。
显然不推荐使用 eval
,它很慢,但绝对提供您正在寻找的功能。
PS。请原谅任何格式错误。我在离家 2k 英里外的手机上输入此信息。否则我会非常乐意提供一些示例代码片段并自己进行上述测试。
我想在我的页面上集成LinkedIn分享。
在此处阅读 LinkedIn 提供的文档: https://developer.linkedin.com/docs/getting-started-js-sdk
.. 我惊讶地发现他们在我的页面的头部部分需要这个脚本标签
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: [API_KEY]
onLoad: [ONLOAD]
authorize: [AUTHORIZE]
lang: [LANG_LOCALE]
</script>
我不明白这里发生了什么。首先,w3schools 说“"Note: If the "src”属性存在,元素必须为空。“””(https://www.w3schools.com/tags/tag_script.asp)。
我也去了这里:https://html.spec.whatwg.org/multipage/scripting.html#the-script-element
(我不是 100% 确定这是多么权威......但是根据格式和长度看起来是权威的:P) - 它也在那里说如果有一个 src
属性,那么正文应该 基本上 是空的 - 在任何情况下 - 这两个资源无法解释 LinkedIn 的脚本语法。
那么有人知道脚本正文语法是怎么回事吗?是那些 JS 标签吗?如果是这样,我不明白它们是如何使用的。我认为标签与 continue/break 语句一起使用,以摆脱循环。如果我以该语法提供信息,我不明白 LinkedIn 的 API 如何从我那里获取信息。 脚本主体是否以某种方式提供给脚本,并由它自己解析?
谁能给我解释一下这是怎么回事?
谢谢!
你说的对。添加 src
属性时,不会执行 script
的主体。然而,有一种方法可以解决这个问题。这是通过检索脚本标记、提取 innerHTML
并在其上使用 eval
来实现的。您当然需要在文档准备好时执行此操作。
我不知道 LinkedIn 到底是怎么做到的,但是 HTML 标准没有改变,加载顺序也没有改变,所以他们要么使用与我解释的类似的东西,要么使用更聪明的方法解析脚本主体。
需要考虑的其他注意事项:您可以将其绑定到您的库中,而不是使用文档就绪事件。就像检索最后一个可用的脚本标签并提取正文一样,在您的库加载时,这将是最后一个以任何方式加载的元素,因此您应该能够在不使用任何事件的情况下检索代码。 (这需要测试,但是 DOM 元素是同步加载的,自上而下的方法)。
显然不推荐使用 eval
,它很慢,但绝对提供您正在寻找的功能。
PS。请原谅任何格式错误。我在离家 2k 英里外的手机上输入此信息。否则我会非常乐意提供一些示例代码片段并自己进行上述测试。