2

首先，看看我的小提琴小提琴

jsFiddle 不错，但有时运行有点慢，所以我做了这个简单的纯 JS fiddle（可以在本地运行）

到目前为止工作得很好，但我希望能够在我的小提琴中使用 jQuery。alert(typeof $);在左下角的框中输入并按“运行”以查看我的意思（说未定义）。

那么如何将 jQuery 传递给 iframe 并为其提供正确的上下文？我怀疑我可以设置doc.contentWindow.$=$或类似的东西，但我仍然需要提供正确的上下文，以便它知道在哪里可以找到元素。我该怎么做？

iframe.contentWindow.$ = $.proxy($,iframe.contentWindow);

那也没有用。让我可以访问 jQuery，但上下文仍然是错误的。

iframe.contentWindow.$ = function(s){return $(s,doc);};

那种工作......但它有点像黑客。

4

2 回答 2

1

为什么不像 jsfiddle 本身那样做呢？它只是head在iframe.

如果你查看head......呃“外部” iframe（jsfiddle创建的那个），你会看到他们只是把这个扔在那里：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>

同样的事情适用于“准备就绪”和“加载”选项，jsfiddle 只是在将其注入 iframe 之前将适当的调用包装在您的 javascript 周围。

稍微修改一下代码，就可以创建一个script元素：

var doc = iframe.contentWindow.document;
var jqueryTag = doc.createElement('script');
jqueryTag.type = 'text/javascript';
jqueryTag.src = 'http://code.jquery.com/jquery-1.6.4.js';

然后将该元素附加到head.

于 2011-10-06T22:26:11.797 回答
1

我稍微调整了你的小提琴：http: //jsfiddle.net/gilly3/XcSYz/3/

首先，您不能将 doctype 写入正文的 innerHTML 并期望它为您做任何事情。与字符集元标记相同。我把所有这些都转移到了一个document.write电话上。

您正在评估编辑器输入时的脚本标签。首先，如果您在 html 框架中编辑脚本标签，这会引发疯狂的错误。其次，如果您alert("hello")在 HTML 窗格中放入一个 in a script 标签，那么每次按键都会收到警报。第三，您在父窗口的上下文中评估脚本。当单击运行并使用正确的上下文时，我更改了要评估的 html 脚本标签。

由于您不想每次都重新编写文档（您不能，例如 doctype），因此我对其稍作修改以进行一些 dom 操作。它删除并替换了样式标签，并且仅将 HTML 窗格内容写入正文的 innerHTML。

这是您正在尝试的一个有趣的小项目。jsFiddle 有问题，需要一些更新。我不知道您的纯客户端小提琴有多可行 - jsFiddle 非常健壮（尽管有错误），但尝试一下您的方法是一个很好的练习。

编辑：此版本中还包含一项更改：我修改了您的 textareas 以使用width: 50%; height: 50%;而不是设置rightand bottom。这些在 IE 或 FF 中无法正常工作。

于 2011-10-06T23:41:54.017 回答