Question

我在该站点上已经阅读了很多有关此主题的内容，但是对于jquery / js来说，我是一个非常陌生的人，我很难将其包裹起来并在需要的地方实现它。

我正在尝试更改iFrame中的链接，以便它们指向父对象，是的，它们在同一域中，因此没有跨安全性问题。

链接是像这样的onclick对象

<td class="partial wd2" onclick="window.top.location.href='https://www.planyo.com/booking.php?calendar=34264&amp;planyo_lang=EN&amp;mode=reserve&amp;prefill=true&amp;one_date=14%20Aug%202018&amp;start_date=14%20Aug%202018&amp;start_time=&amp;end_time=&amp;resource_id=104777'" title="Available for part-day rental only. Click on the date above for details.">•</td>

我想更改所有这些内容以定位父级。

我认为我需要将它们更改为：

<td class="partial wd2" onclick=window.open('https://www.planyo.com/booking.php?planyo_lang=EN&mode=reserve&prefill=true&one_date=14%20Aug%202018&start_date=14%20Aug%202018&start_time=&end_time=&resource_id=104777','_parent')>•</td>

或其他更好的选择，例如 window.parent.location ...

我的主要问题是我似乎无法使用class / id选择器来选择该深度。我可以选择带有ID的前面的div，但不能超出此范围，我也不知道为什么。

<!--Custom JS Overrides -->
<script>
var f=$('#calp_852795051')
f.load(function(){ 
        f.contents().find('#horizontal_calendar').css({'border' : '1px solid red'});
        f.contents().find('#caltop').css({'border' : '1px solid yellow'});
        f.contents().find('#cal').css({'border' : '1px solid green'});
        })

</script>

结果（其中＃calp_852795051是iframe ID）：

<div id="caltop" class="page" style="padding: 2px; background: transparent; border: 1px solid yellow;">
<div id="horizontal_calendar" class="left" style="border: 1px solid red;">
<table id="cal" class="calhoriz" cellpadding="0" cellspacing="0"> ......

因为#cal为空。

编码不是我经常要做的事情，而且我显然在这里遗漏了一些东西，我似乎无法弄清楚。

页面为： https://www.planyo.com/booking.php?calendar=34264&feedback_url=https%3A%2F%2Fwww.planyo.com%2Fbooking.php%3Fcalendar%3D34264&presentation_mode=1&planyo_lang=en&resource_id=104777&mode=resource_desc

非常感谢您提供的任何帮助。

修改

因此，我尝试了基于juan的引用的另一种方法，但是我仍然无所适从，我认为这是我缺乏理解的问题。不幸的是，无论我读了多少书，我都没听懂。

    <script>
    var f = document.getElementById('calp_852795051');
    f = (f.contentWindow) ? f.contentWindow : (f.contentDocument.document) ? f.contentDocument.document : f.contentDocument;
    f.document.querySelector('#horizontal_calendar').css({'border' : '1px solid red'});
</script>

但这次#horizontal_calendar为空。

edit2

因此，我在努力掌握juan的建议时已恢复为原始方法。

我不了解的是，当它们都属于同一iframe时，如何定位一些元素/选择器，而不是其他？

var b=$("[id^=calp]");
    b.load(function(){ 
            b.contents().find('script').remove(); //works
            b.contents().find('body').css({'border' : '2px solid green'}); //works
            b.contents().find('#caltop').prepend('<p>Blah Blah</p>'); //works
            b.contents().find('#horizontal_calendar').css({'background' : '#c9c9c9'}); //works
            b.contents().find('#horizontal_calendar').prepend('<p>Blah Blah</p>'); //any element/selector thing from this point is not working
            b.contents().find('td').css({'border' : '3px solid black'}); //doesn't work as is inside #horizontal_calendar
    })

似乎在#horizontal_calendar碰壁了，以前没事的。

edit3 原来是时机。

var b=$("[id^=calp]");
b.load(function(){ 
        b.contents().find('script').remove(); //works
        b.contents().find('body').css({'border' : '2px solid green'}); //works
        b.contents().find('#caltop').prepend('<p>Blah Blah</p>'); //works
        b.contents().find('#horizontal_calendar').css({'background' : '#c9c9c9', 'width' : '100%'}); //works

        function timeout(){ 
            b.contents().find('#horizontal_calendar').prepend('<p>Blah Blah</p>'); //any element/selector thing from this point is not working
            b.contents().find('td').css({'border' : '3px solid black'}); //doesn't work as is inside #horizontal_calendar
            var element =b.contents().find('#cal');

            console.log(element);
        }

        setTimeout(timeout, 10000);
})

通过为操作设置超时来最终找到它们，因此无论出于何种原因，它们在DOM树中的形成速度都没有其他树快，因此又返回了空值。

我敢肯定有更优雅的方法来解决这个问题，但至少我走在正确的轨道上。

始终欢迎您提供有关达到相同结果的更好方法的建议。

Answer 1

在我的评论之后（在iframe中为jquery提供了一个上下文），我得到了#cal的帮助：

var $ctx = $("#calp_852795051").get(0).contentDocument;  
$cal = $("#cal", $ctx);

在iFrame中定位元素时遇到问题

1 个答案: