有没有办法删除 JSFiddle 嵌入式视图中的顶部栏

Question

当我转到 JSFiddle 嵌入式全屏视图 (<url of fiddle>/embedded/result) 时，顶部总是有一个带有 JSFiddle 的栏，如此处显示 result:

有没有办法从视图中删除此栏？

注：

您也可以通过转至 URL <url of fiddle>/show 来访问此视图。

Answer 1

嵌入的 fiddle 只是另一个 iframe 中的一个 iframe。您可以从子 iframe 获取源并用它替换父 iframe。

从图中的*/embedded/result url开始。

使用开发工具检查父 iFrame。
复制子 iFrame 源代码 link（看起来像 '/fiddle.jshell.net/blah/blah/show/light/').
将父嵌入源 link 替换为复制的源。

应该可以了。为我工作。

Answer 2

在阅读之前，请注意 jsfiddle 是一个不错的网站，他们这样做是为了让人们不能仅仅使用它们来托管然后嵌入他们的 links。

在删除他们所有的品牌之前考虑一下 - 不要做一个混蛋。

我不知道在 Noel 的回答后他们是否改变了这个，但它仍然为我显示顶部的栏。

不过还是可以的

示例：

https://fiddle.jshell.net/vmt32w4d/11/show/

诀窍是按照 Noel 的建议找到 fiddle.jshell.net 上的 iframe 的来源。

如果您尝试访问 iframe 之外的元素，他们会将其保存在一个单独的源上，以便为您提供跨源异常。

这没问题，只需 link 添加以下代码即可：

$("header",window.parent.document).remove();
$("#tabs",window.parent.document).css({
    'margin-top':'0px',
    'height':'100vh'
});
$("#result",window.parent.document).css({
    'margin-top':'0px',
    'height':'100vh'
});

我包含了 jquery 库以使其工作 - 否则您可以编辑代码以使用 vanilla JS 更改 css。

可能有更好的方法来改变 css 或其他任何东西，但现在你知道怎么做了

有没有办法删除 JSFiddle 嵌入式视图中的顶部栏

Is there a way to remove the top bar in JSFiddle embedded view

html

javascript

jsfiddle