如何从 windows phone webbrowser 控件中隐藏 html 元素

Question

关于我需要什么的一些介绍，但在任何地方都找不到完整的答案。我使用 webbrowser 控件在我的应用程序中显示一个网站，但我想删除上面的导航，它单独存在于一个类名为“tabs-outer”的 html 元素中。我想在我的应用程序中而不是在主页的 css 中执行此操作，因为它是为了显示移动设备的内容而我只想在我的应用程序中显示在没有它的 webbrowser 控件和桌面/移动网站上它保持原样可见。

我发现了一些 java 脚本代码，例如 "$('#mydiv').allBut().hide();" 我知道我必须添加类似 "$('. tabs-outer').allBut().hide();" 但在哪里？！我不知道在哪里输入这个，如何在应用程序中调用它？！我需要更多信息。我发现了一个已有 2 年历史的线程，但没有关于具体做什么的信息。

如何以及在哪里使用这个 javascript，是否可以在应用程序中添加它，所以我在运行时调用它这个脚本？！有什么帮助吗？我是一个新手，所以我对javascripts一无所知，在windows phone和c#中也一无所知。

这是我现在使用它的方式：

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {

        String url = NavigationContext.QueryString["url"];
        if (!String.IsNullOrEmpty(url))
        {
           WebBrowser.Navigate(new Uri(url));
        }

    }
    private void WebBrowser_LoadCompleted(object sender, NavigationEventArgs e)
    {
        WebBrowser.InvokeScript("RemoveNav");
        SystemTray.SetProgressIndicator(this, null);
        WebBrowser.Visibility = Visibility.Visible;
    }

我在我的网页上的标题中添加了一个脚本，如下所示：

<script type="text/javascript">
function RemoveNav() 
{ 
$('.tabs-outer').not(this).hide() 
}
</script>

它可以工作，但是，我必须将 webbrowser 控件的可见性设置为折叠页面才能加载 - “隐藏”我想要的元素，然后使其可见。但我需要一些东西来拦截这个元素的加载，但只能在我的 windows phone 应用程序中的 webbrowser 控件中。

Answer 1

您提供了 jQuery 源代码。 jQuery 是开源的，可以免费下载和使用。 请查看此站点以获取有关 jQuery 的信息：http://learn.jquery.com/

您的确切答案在这里找到并解释：http://learn.jquery.com/using-jquery-core/document-ready/

实际上，页面加载后，代码将运行。您需要的代码在这里：

<script>
// A $( document ).ready() block.
$( document ).ready(function() {
    $('.tabs-outer').hide();
});
</script>

您需要将此代码作为 javascript 包含在您的网页中。要使用该代码，您还需要在 html 页面的 head 部分中包含以下行。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

这将加载 jQuery 插件，该插件将解释您的脚本并隐藏其类设置为“tabs-outer”的所有 div。

祝你好运！

Answer 2

我添加了这个新答案，因为在某些情况下，对于某些用户来说，我之前的答案就足够了。

这个问题可以用 CSS 解决。 您从移动设备应用程序加载页面并可以访问标题部分。考虑到这一点，您可以从那里设置 div 的样式。

使用 !important 将覆盖其他规范，但如果 css 已经使用 !important（我非常怀疑），您必须确保您的样式位于页面样式之后。考虑到这一点，尝试在 head 元素中添加以下代码：

<style>
    .tabs-outer {
        display: none !important;
    }
</style>

这将完全删除您的 div。

更新：为所有设备隐藏它们并为非 wp 显示它们

第 1 步：在标题部分添加样式

<style>
    .tabs-outer {
        display: none;
    }
</style>

第 2 步：在 jQuery API 的标头部分添加导入

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

第 3 步：在标题中添加代码

<script type="text/javascript">
$(document).ready(function(){
    if(!navigator.userAgent.match(/IEMobile/i) && !navigator.userAgent.match(/Windows Phone/i)){
        $(".tabs-outer").show();
    }
});
</script>

就是这样。桌面速度更快，因此它应该足够快地加载元素并显示它们。

**更新：在 CSS 中使用媒体查询和 !important 隐藏您需要的内容并自定义显示

您可以在CSS中添加以下代码以最有效的方式解决问题：

@media only screen
and (min-device-width : 160px)
and (max-device-width : 640px) {
    .tabs-outer {
        display: none !important;
    }
    html {
        font-family : "Palatino Linotype";
        font-size : 12;
        font-color : #98AFC7;
    }

    .........

}

资源：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

您现在可以保留您的自定义样式。对不起，我第一次没有得到它，但是自从我在网站上工作以来已经很久了。

请提供反馈。再次:-)