将 GET 参数传递给 jsfiddle 嵌入式版本

Question

我在我的网站中使用 jsfiddle 的嵌入式版本，如下所示：

<script async src="//jsfiddle.net/mebibou/va5pu0bd/embed/"></script>

我尝试在该 url 中传递参数，例如 ?foo=bar，但我在控制台中从该 url 上的脚本中收到错误：

Uncaught TypeError: Cannot read property 'parentNode' of null
    at createEmbedFrame (?foor=bar:19)
createEmbedFrame @ ?foor=bar:19
setTimeout (async)
(anonymous) @ ?foor=bar:43
(anonymous) @ ?foor=bar:45

（可以看到这里执行的代码：http://jsfiddle.net/mebibou/va5pu0bd/embed/?foo=bar） 我还尝试使用嵌入的 iframe 版本，但它在其中加载了另一个 iFrame，删除了我放置的 url 参数。有可能吗？我想要做的是将参数从我的网站传递给 jsfiddle 代码，并认为 url 参数将是最简单的方法

Answer 1

如果您从路径组件中删除尾部斜杠，错误就会消失：

<script async src="//jsfiddle.net/mebibou/va5pu0bd/embed/?foo=bar"></script>
                                                        ^

<script async src="//jsfiddle.net/mebibou/va5pu0bd/embed?foo=bar"></script>

发生错误是因为jsfiddle.net 服务器在编写uriOriginal 变量时去掉了这样的斜线：

var uriOriginal           = "http://jsfiddle.net/mebibou/va5pu0bd/embed?foo=bar"

这会导致 CSS 选择器与您的 <script> 标记不匹配：

var uriOriginal           = "http://jsfiddle.net/mebibou/va5pu0bd/embed?foo=bar"
var uriOriginalNoProtocol = uriOriginal.split("//").pop()
var target                = document.querySelector("script[src*='" + uriOriginalNoProtocol + "']")
console.log("script[src*='" + uriOriginalNoProtocol + "']", target);

但是，如果您的 <script> 标签省略了斜线，则选择器匹配。

尽管这个 hack 只是防止错误并允许 fiddle 加载和运行，但毫无价值。它不会将原始 URL 参数传输到最终的 iframe，因为它的路径已经硬编码在服务器生成的 JavaScript 代码中：

var uriEmbedded = "http://jsfiddle.net/va5pu0bd/embedded/?username=mebibou")
iframe.src               = uriEmbedded
target.parentNode.insertBefore(iframe, target.nextSibling)

综上所述，传递 URL 参数可能是不支持的场景。