Javascript 设置viewScope onLoad和onResize

我在CSS中使用了“@media only screen”，根据用户的屏幕大小来确定如何显示以及显示哪些信息。我有一个名为panelContainer的类，设置为当屏幕大于767px时显示，还有一个名为mobileContainer的类，当屏幕小于767px时显示

我有两个自定义控件，一个包含标准表单布局，另一个包含移动设备表单布局。最初，我用适当的styleClass在每个元素周围放置了一个div。这种方式的问题是，尽管只有一个表单可见，但它们都已加载，因此导致了保存问题

<xp:div id="panelContainer" styleClass="panelContainer">
    <xc:content_sCompany></xc:content_sCompany>
</xp:div>
<xp:div id="mobileContainer" styleClass="mobileContainer">
    <xc:content_iCompany></xc:content_iCompany>
</xp:div>

此后，我使用panelContainer的styleClass向我的Xpage添加了一个div，然后添加了onLoad和onResize事件，这些事件返回div的style.display，然后将结果写入viewScope。但是我发现它只会写onLoad，尽管函数被调用onResize，但它不会更改viewScope变量

<xp:scriptBlock id="scriptBlock1" type="text/javascript">
    <xp:this.value>
        <![CDATA[var init = function() {
            obj=document.getElementById('formType');
            if(getStyleDisplay(obj)=="none"){
                formType='#{javascript:viewScope.put("formFormat","mobile");}';
            }else{ 
                formType='#{javascript:viewScope.put("formFormat","standard")}';
           }
        }

        dojo.addOnLoad(init);
        dojo.connect(window,"onresize",init);

        function getStyleDisplay(obj) {
            if(obj.currentStyle) { // IE – Opera
                return obj.currentStyle.display;
            } else { // firefox
                return getComputedStyle(obj,'').getPropertyValue('display');
            }
        }]]>
    </xp:this.value>
</xp:scriptBlock>
<div id="formType" class="panelContainer"></div>

..…然后按以下方式使用此viewScope变量：

<xc:content_Company xp:key="ContentControl">
    <xp:this.facets>
        <xc:content_sCompany id="content_sCompany"
            xp:key="standard">
        </xc:content_sCompany>
        <xc:content_iCompany id="content_iCompany"
             xp:key="mobile">
        </xc:content_iCompany>
    </xp:this.facets>
</xc:content_Company>

……摘自内容公司

<xp:callback facetName="#{viewScope.formFormat}" id="cbkCompanyFormContent">
</xp:callback>

我觉得这是实现所需结果的更好方法，因为当我手动尝试时，它只加载其中一个表单，并且它们按预期工作

我不明白为什么viewScope设置不正确，它总是被设置为“标准”，即使我在加载页面之前收缩页面。我确实尝试将该值写入隐藏输入，但每当我尝试使用getComponent（“hiddenInput1”）.getValue（）访问该值时，它都会返回null，即使我可以在firebug中查看时看到该值已被设置。

好，您可以通过一些控制台检查（或告诉我您是否已经设置了）。log（“”）是指正在调用onResize，并且正在下拉正确的显示等等

接下来，它可能会触发onResize，但是您是否会部分刷新正在使用viewScope的区域

代码示例：（将controlID替换为您的）

我对使用onResize的目的有点困惑？如果要决定在手机或普通屏幕上显示什么，有更有效的方法

在openNTF上最新版本的ExtLib中使用新的重定向控件。它完全按照名字的意思做，并根据特定的表达式重定向。让你把它放在一个页面上，然后说如果手机（或其他什么）重定向到此页面

有一个虚拟的默认加载页面，用于检查useragent字符串以查看要加载的页面（有一个单独的移动/全屏页面）。这就是ExtLib附带的teamroom模板应用程序对其main.xsp所做的，然后将其设置为默认启动选项

或者，如果您试图对手机/平板电脑是在横向还是纵向进行操作，则应使用onOrientationChange事件，而不是onResize。看看这个例子（不是问题中的代码，我也在指给你看，他在网络视图中很难做到这一点）：

好的，您可以通过一些控制台检查（或告诉我您是否已经检查过）。日志（“”）显示正在调用onResize，并且正在下拉正确的显示等等

接下来，它可能会触发onResize，但是您是否会部分刷新正在使用viewScope的区域

代码示例：（将controlID替换为您的）

我对使用onResize的目的有点困惑？如果要决定在手机或普通屏幕上显示什么，有更有效的方法

在openNTF上最新版本的ExtLib中使用新的重定向控件。它完全按照名字的意思做，并根据特定的表达式重定向。让你把它放在一个页面上，然后说如果手机（或其他什么）重定向到此页面

有一个虚拟的默认加载页面，用于检查useragent字符串以查看要加载的页面（有一个单独的移动/全屏页面）。这就是ExtLib附带的teamroom模板应用程序对其main.xsp所做的，然后将其设置为默认启动选项

或者，如果您试图对手机/平板电脑是在横向还是纵向进行操作，则应使用onOrientationChange事件，而不是onResize。看看这个例子（不是问题中的代码，我也在指给你看，他在网络视图中很难做到这一点）：

---

你好，西蒙，我确实在整个过程中添加了警报，它们确实在适当的点触发。我认为我试图使用onResize使整个事情变得过于复杂，这在当时似乎是个好主意！我将按照您的建议查看虚拟默认加载页面。很多感谢，您是否部分刷新了根据viewscope确定面的区域？因为如果没有这个，它不会改变显示不，但是viewScope本身从来没有改变过，所以没有走那么远。感谢againHi Simon，我在整个过程中添加了警报，它们确实在适当的点触发。我认为我试图使用onResize使整个事情变得过于复杂，这在当时似乎是个好主意！我将按照您的建议查看虚拟默认加载页面。很多感谢，您是否部分刷新了根据viewscope确定面的区域？因为如果没有这个，它不会改变显示不，但是viewScope本身从来没有改变过，所以没有走那么远。再次感谢

XSP.partialRefreshGet("controlID", {
    onError: function() { console.log('Error'); }
});