隐藏从外部网址加载的元素 [英] Hide an element loaded from external url

问题描述

我试图隐藏所有不包含字符串Marc的表格行， < script type =text / javascript> 
 id =ki1120mmvd; 
 name =schedule; 
 document.write（unescape（％3Cscript src ='http：//healcode.com/javascripts/hc_widget.js'type ='text / javascript'％3E％3C / script％3E））; 
< / script> 
  

我可以使用类id或属性隐藏表行中的某些元素但它看起来像我需要js / jquery / php来完全消除行和我发现的一切都没有奏效。

这是一个链接到我抓住的地方代码：
http://www.funkydoor.com/studio_polk_street.html

以下是我的使用方法：
http://www.marcmatisyoga.com/schedule.html

解决方案：包含选择器是最佳选择。但是，就您的具体情况而言，为了使其发挥作用还需要做更多的工作。在我的测试中，似乎是由于外部脚本中某些动态加载的URL被破坏， jQuery 或 $ 是未定义。解决方法是在表（和其他外部脚本）加载后重新加载 jQuery API。

[更新]

我重新发布 .html 文件的全部内容我相信它会呈现正确的结构（对于我来说，它可以在Chrome中运行）。为了实现所需的字体颜色和URL格式，您还需要做一些必要的修改，您可以通过 jQuery 的 .css（）函数，如下所示。请注意：

1. 我完全删除了< style> ...< / style> tag和


2. 我在< body>中调用 waitForFnc 的< script> 标记，就在外部脚本动态加载后。

我很抱歉需要水平滚动来查看完整的 jQuery 样式格式，但与解决方案无关点，当你想修改它应用你自己的格式。

 < html> 
< head> 
 
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script> 
< script> 
 var count = 0; 
 
函数waitForFnc（）{
 if（typeof $！=undefined）
 {
 if（$（tr.bikram_yoga）。length == 0）{
 window.setTimeout（waitForFnc，50）; 
} 
 else 
 {
 $（div.healcode .header，div.healcode table.schedule tr th，div.healcode table.schedule tr.odd td，div。 healcode table.schedule tr.even td）。css（background-color，＃f4f4f4）; 
 $（。location，span.print_text，a.print_version，.mbo_class，span.day_links，.header，span.hc_date_year，div：n-type-type（10），a [href * ='100000210 ']，a [href * ='/ 13 /']，[href * ='100000242']，[href * ='100000201']，[href * ='/ 142 / * ='100000174']，a [href * ='100000229']，a [href * ='100000053']，th.trainer）。hide（）; 
 $（div.healcode）.css（padding，20px 0 0 20px！important）; 
 $（div.healcode span.hc_day）。css（{margin-left：0！important，
text-align：left！important}）; 
 $（div.healcode table.schedule）.css（border，none！important）; 
 $（table .schedule，tr schedule_header th）。css（background-color，＃f4f4f4）; 
 $（tr.bikram_yoga）。not（：contains（'Marc'））。hide（）; 
 
 
 else {
 if（count == 0）{
 var oHead = document.getElementsByTagName（'HEAD'）。item（0）; 
 var oScript = document.createElement（script）; 
 oScript.type =text / javascript; 
 oScript.src =http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js; 
 oHead.appendChild（oScript）; 
 count = count + 1; 
} 
 window.setTimeout（waitForFnc，50）; 
} 
} 
< / script> 
< / head> 
< body> 
< table> 
< tr> 
< td align =leftvalign =top> 
< div style =background-color：white;> 
< script type =text / javascript> 
 id =ki1120mmvd; 
 name =schedule; 
 document.write（unescape（％3Cscript src ='http：//healcode.com/javascripts/hc_widget.js'type ='text / javascript'％3E％3C / script％3E））; 
 waitForFnc（）; 
< / script> 
< noscript class =normal_left_yellow> 
请启用Javascript以查看课程时间表：< a href =http://healcode.comtarget =_ blank> HealCode< / a> 
< / noscript> 
< / div> 
< / td> 
< / tr> 
< / table> 
< / body> 
< / html> 
  

I'm trying to hide all table rows that don't contain the string "Marc" from a js widget loaded from an external url.

<script type="text/javascript">
  id = "ki1120mmvd";
  name = "schedules";
  document.write(unescape("%3Cscript src='http://healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
</script>

I've been able to hide some elements within the table rows with css using the class id or attribute but it looks like I need js/jquery/php to completely eliminate the rows and everything I've found hasn't worked.

Here is a link to where I grabbed the code: http://www.funkydoor.com/studio_polk_street.html

Here is how I'm using it: http://www.marcmatisyoga.com/schedule.html

解决方案

The :contains selector is the perfect choice. But, in your specific case, there is some more effort to be done in order to make it work. In my tests, it seems that due to some broken URL's in the external script that are loaded dynamically, jQuery or $ are undefined. The workaround is to reload the jQuery API after the table (and the other external scripts) loads.

[UPDATE]

I'm re-posting the whole content of a .html file which I believe it renders the correct structure (for me, it works in Chrome). There are still some necessary modifications you'll have to do in order to achieve your desired font color and URL formatting, which you can implement by jQuery's .css() function, as I did below. Please note that:

1. I removed entirely the <style>...</style> tag and
2. I'm calling the waitForFnc function in the <body>'s <script> tag, just after the external script is loaded dynamically.

I apologize for the need of horizontal scrolling to see the full jQuery style formatting, but it's not really relevant to the solution up to the point when you would like to modify it apply your own formatting.

<html>
    <head>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
        <script>
            var count=0;

            function waitForFnc(){
                if(typeof $ != "undefined")
                {
                    if($("tr.bikram_yoga").length==0){
                       window.setTimeout(waitForFnc,50);
                    }
                    else
                    {
                            $(" div.healcode .header, div.healcode table.schedule tr th, div.healcode table.schedule tr.odd td, div.healcode table.schedule tr.even td").css("background-color","#f4f4f4");
                            $(".location, span.print_text, a.print_version, .mbo_class, span.day_links, .header, span.hc_date_year, div:nth-of-type(10), a[href*='100000210'], a[href*='/13/'], a[href*='100000242'], a[href*='100000201'], a[href*='/142/'], a[href*='100000174'], a[href*='100000229'], a[href*='100000053'],th.trainer").hide();
                            $("div.healcode").css("padding","20px 0 0 20px !important");
                            $("div.healcode span.hc_day").css({"margin-left": "0 !important",
            "text-align": "left !important"});
                            $("div.healcode table.schedule").css("border","none !important");
                            $("table .schedule, tr schedule_header th").css("background-color","#f4f4f4");
                            $("tr.bikram_yoga").not(":contains('Marc')").hide();
                    }
                }
                else{
                    if(count==0){
                        var oHead = document.getElementsByTagName('HEAD').item(0);
                        var oScript= document.createElement("script");
                        oScript.type = "text/javascript";
                        oScript.src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
                        oHead.appendChild( oScript);
                        count=count+1;
                    }
                    window.setTimeout(waitForFnc,50);
                }
            }
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td align="left" valign="top">
                <div style="background-color: white;">
                <script type="text/javascript">
                    id = "ki1120mmvd";
                    name = "schedules";
                    document.write(unescape("%3Cscript src='http://healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
                    waitForFnc();
                </script>
                <noscript class="normal_left_yellow">
                    Please enable Javascript in order to view the class schedule: <a href="http://healcode.com" target="_blank">HealCode</a>
                </noscript>
                </div>
                </td>
            </tr>
        </table>
    </body>
</html>

这篇关于隐藏从外部网址加载的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！