jQuery：在 iframe 中工作而无需重新链接

发布于 2024-11-06 12:27:04 字数 817 浏览 0 评论 0原文

也许标题有点误导，问题也可能是这样，但我很好奇，如何从内部（同一主机/域）iframe使用 jQuery，而不重新链接到 jQuery 的源代码iframe 加载的 HTML。

好吧，我可以使用 parent.jQuery(); 访问它，但是每当我尝试用它操作元素时，它都会在 parent 框架中工作，而不是在当前的、活跃的。

Iframe 使用 ColorBox v.1.3.16 生成。

这是我到目前为止所尝试过的，但完全没有运气..（这来自 iframe 内）：

jQuery = parent.jQuery;
jQuery(document).ready(function(){
    jQuery('#time-bar .slider', document).css({ 'background-color' : 'blue', 'left' : '-99%' });
});

我在这里使用 document 作为父选择器，但它不起作用，我不知道那里应该用什么。

提前致谢！

编辑：

源自 TJ Crowder：

parent.jQuery(function($) {
    var element = $("#time-bar", document);
    console.log(element);
});

console.log() 返回一个空对象，或者实际上不知道它是否可以称为对象：[]。

原文

Maybe the title is a little misleading and question could be too, but I'm curious, how would one work with jQuery from an internal (same host/domain) iframe without re-linking to jQuery's source in iframe's loaded HTML.

Well, I'm able to access it with parent.jQuery();, but whenever I'm trying to manipulate elements with it, it works in parent frame not the current, active one.

Iframe is generated with ColorBox v.1.3.16.

Here is what I've tried so far, with no luck at all.. (this comes from within iframe):

jQuery = parent.jQuery;
jQuery(document).ready(function(){
    jQuery('#time-bar .slider', document).css({ 'background-color' : 'blue', 'left' : '-99%' });
});

I've used document as a parent selector here, but it doesn't work, and I have no idea what should be used there.

Thanks in advance!

EDIT:

Derived from T.J. Crowder:

parent.jQuery(function($) {
    var element = $("#time-bar", document);
    console.log(element);
});

console.log() returns an empty object, or actually, have no idea if it can be called an object: [].

分享到QQ

分享到微博

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

发布评论

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

够钟 2024-11-13 12:27:04

排除其他因素，您的代码将 document 传递到 jQuery()($()) 函数作为上下文文档应该可以工作。

示例：

HTML:

<script src="blah/blah/jquery.min.js"></script>
<iframe id='theframe' src='http://jsbin.com/ulehi4'>

iFrame HTML:

<input type='button' id='theButton' value='Click Me'>

iFrame JavaScript:

parent.jQuery(function($) {
  $("#theButton", document).click(function() {
    $("<p>Button clicked!</p>").appendTo(document.body);
  });
});

Live example

尽管如此，如果您使用相同的链接父级和框架中的 jQuery 文件（可能来自它所在的 CDN 之一），确实几乎没有开销。如果您无法控制标记，可以在 iframe 中插入 script 元素。

Barring other factors, your code passing in document to the jQuery() ($()) function as the context document should work.

Example:

HTML:

<script src="blah/blah/jquery.min.js"></script>
<iframe id='theframe' src='http://jsbin.com/ulehi4'>

iFrame HTML:

<input type='button' id='theButton' value='Click Me'>

iFrame JavaScript:

parent.jQuery(function($) {
  $("#theButton", document).click(function() {
    $("<p>Button clicked!</p>").appendTo(document.body);
  });
});

Live example

That said, though, if you use the same exact link to the jQuery file (perhaps from one of the CDNs it's in) in both the parent and the frame, there's very little overhead indeed. You can insert a script element in the iframe if you're not in control of the markup.

回复收藏 0 原文

不甘平庸 2024-11-13 12:27:04

如果我正确理解了这个问题 - 请参阅：
jQuery/JavaScript：访问 iframe 的内容

更重要的是从那里：

$().ready(function () {
    $("#iframeID").ready(function () { //The function below executes once the iframe has finished loading
        $('some selector', frames['nameOfMyIframe'].document).doStuff();
    });
};

If I understand the question correctly - see:
jQuery/JavaScript: accessing contents of an iframe

more importantly from there:

$().ready(function () {
    $("#iframeID").ready(function () { //The function below executes once the iframe has finished loading
        $('some selector', frames['nameOfMyIframe'].document).doStuff();
    });
};

回复收藏 0 原文

~没有更多了~