javascript - 有没有办法删除 JSFiddle 嵌入式 View 中的顶部栏

Question

当我转到 JSFiddle 嵌入式全屏 View (<url of fiddle>/embedded/result) 时，顶部始终有一个带有 JSFiddle 的栏，如下所示，其中显示结果:

有没有办法从 View 中删除这个栏？

注意:

您还可以通过转到 URL <url of fiddle>/show 访问此 View .

Answer 1

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

在删除他们所有的品牌之前请考虑这一点 - 不要是个 SCSS 。

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

不过还是可以的。

示例:

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

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

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

这没问题，只需链接到它并添加以下代码:

$("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 或其他任何内容，但现在您知道该怎么做了 🙂