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仅能防止错误并允许小提琴加载并运行，但它毫无价值。它不会将原始URL参数传输到最终的iframe，因为其路径已经在服务器生成的JavaScript代码中进行了硬编码：

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

总而言之，传递URL参数可能是不受支持的方案。

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

1 个答案: