如何将 jQuery 传递给评估代码？

发布于 2024-12-08 08:35:53 字数 600 浏览 0 评论 0原文

首先，看看我的 fiddle fiddle

jsFiddle 很好，但有时运行有点慢，所以我把这个简单了纯 JS 小提琴（可以在本地运行）

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

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

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

那也没用。允许我访问 jQuery，但上下文仍然错误。

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

这种方法是可行的……但它有点像黑客。

原文

First, check out my fiddle fiddle

jsFiddle is nice, but sometimes it runs a bit slow, so I made this simple pure JS fiddle (can be ran locally)

Working great so far, but I want to be able to use jQuery in my fiddle. Type alert(typeof $); in the bottom left box and press "Run" to see what I mean (says undefined).

So how do I pass jQuery off to the iframe and give it the correct context? I suspect I could set doc.contentWindow.$=$ or something like that, but I still need to give the correct context so it knows where to find the elements. How would I do that?

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

That didn't work either. Gives me access to jQuery, but the context is still wrong.

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

That sort of works... but it's a bit of a hack.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

|煩躁 2024-12-15 08:35:53

为什么不像 jsfiddle 本身那样做呢？它只是在 iframe 的 head 中包含一个 jQuery（或您要求的任何框架）的脚本标记。

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

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

同样的事情适用对于“就绪”和“加载”选项，jsfiddle 只是在将 JavaScript 注入到 iframe 之前将适当的调用包装起来。

稍微修改一下代码，您可以创建一个 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 中。

Why not do as jsfiddle itself does? It simply includes a script tag for jQuery (or whatever framework you asked for) in the head of the iframe.

If you look in head of the... uh "outer" iframe (the one jsfiddle created), you'll see they just threw this in there:

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

Same thing applies to the "on ready" and "on load" options, jsfiddle just wraps the appropriate call around your javascript before injecting it into the iframe.

Modifying your code a little, you can create a script element:

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';

and then append that element to the head.

回复收藏 0 原文

森林散布 2024-12-15 08:35:53

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

首先，您不能将文档类型写入正文的innerHTML 并期望它为您做任何事情。与字符集元标记相同。我将所有这些都转移到了 document.write 调用中。

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

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

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

编辑： 此版本中包含的另一项更改：我修改了您的要使用的文本区域宽度：50%； height: 50%; 而不是设置 right 和 bottom。这些在 IE 或 FF 中无法正常工作。