скрыть управление, когда xsp находится в iframe

Я хотел бы скрыть определенные элементы управления, когда xpage встроен в iframe. Как я могу это сделать?

Основываясь на некоторых рекомендациях на этом сайте, я попробовал:

На стороне клиента JavaScript у меня есть:

<xp:eventHandler event="onClientLoad" submit="false">
        <xp:this.script><![CDATA[if (window.frameElement) {
  //in iframe
  var field = document.getElementById("#{id:NavBarOption}");
  alert(field.id)
  field.value = "hide";
}
else {
  //NOT in iframe
  var field = document.getElementById("#{id:NavBarOption}");
   alert(field.id)
  field.value = "";
}]]></xp:this.script>
</xp:eventHandler>

Это должно установить элемент управления полем ввода, который имеет частичное обновление в событии onchange для:

<xp:inputText id="NavBarOption"
        value="${javascript:viewScope.NavBarOption}">
        <xp:this.attrs>
            <xp:attr name="type" value="hidden"></xp:attr>
        </xp:this.attrs>
        <xp:eventHandler event="onchange" submit="true"
            refreshMode="partial" refreshId="body" immediate="true"
            execMode="partial" execId="body">
        </xp:eventHandler>
    </xp:inputText>

Элемент управления полем ввода привязан к переменной области видимости. Эта область Variabel будет использоваться в элементах управления или пользовательском элементе управления для отображаемого свойства, например:

<xc:ccNavBar id="ccNavBar">
            <xc:this.rendered><![CDATA[#{javascript:return true;
var hide = viewScope.showNavBar;

if (hide !=""){
    //return false;
}
else{
    //return true;
}}]]></xc:this.rendered>
        </xc:ccNavBar>

Что я делаю неправильно?


person Patrick Kwinten    schedule 08.09.2015    source источник


Ответы (1)


Ваш код кажется немного странным, но, возможно, я не понимаю всей картины. Позвольте мне разделить мой ответ на две части:

Раздел 1: возможное решение для вашей первоначальной задачи (скрыть элементы управления в зависимости от того, являются ли они частью iframe или нет):

только что попробовал очень простой подход:

  1. построил страницу, включающую iframe, чей атрибут src вызывает другой xsp
  2. атрибут src также содержит строку запроса; Я использовал "?status=inIframe"
  3. также построил настраиваемый элемент управления, запрашивающий указанную строку запроса
  4. чтобы доказать, что все работает так, как ожидалось, я использовал CC дважды: один раз внутри xsp, вызываемого iFrame, и один раз непосредственно на главной странице.

Вот код:

Пользовательский элемент управления ccInner; имеет логическое свойство CC "isInIframe":

<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:panel
        id="pnInnerContainer">
        <xp:label
            id="label1">
            <xp:this.value><![CDATA[#{javascript:compositeData.isInIframe?"I'm inside an iframe":"I'm outside an iframe"}]]></xp:this.value>
            <xp:this.style><![CDATA[#{javascript:compositeData.isInIframe?"color:red;":"color:blue;"}]]></xp:this.style>
        </xp:label>
    </xp:panel>
</xp:view>

«Внутренний» xsp включает ccInner; логическое свойство CC вычисляется на основе context.getUrlParameter("status"):

<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom">
    <xc:ccInner>
        <xc:this.isInIframe><![CDATA[#{javascript:context.getUrlParameter("status")=="iniframe"?true:false}]]></xc:this.isInIframe>
    </xc:ccInner>
</xp:view>

«Внешний» xsp содержит определение iframe, а также второй экземпляр пользовательского элемента управления, снова вычисляя свойство CC на основе urlParameter:

<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom">
    <xp:panel
        id="iframeContainer"
        style="padding:10px;border:1px grey solid;">
        <iframe
            id="myIframe"
            frameborder="0"
            style="width:300px;height:30px;border:1px red solid;padding:5px;"
            src="testinnerifr.xsp?status=iniframe">
        </iframe>
        <xc:ccInner>
            <xc:this.isInIframe><![CDATA[#{javascript:context.getUrlParameter("status")=="iniframe"?true:false}]]></xc:this.isInIframe>
        </xc:ccInner>
    </xp:panel>
</xp:view>

У меня работает нормально: метка внутри CC показывает ожидаемое значение в ожидаемом цвете.

Раздел 2: некоторые замечания относительно вашего кода

  1. использование document.getElementById() на страницах на основе dojo считается не очень эффективным; попробуйте вместо этого использовать dojo.byId() или XSP.getElementById().
  2. вы привязываете директиву viewScope onPageLoad, используя «$» вместо «#» («${javascript:viewScope.NavBarOption}». Есть ли конкретная причина, по которой вы хотите запретить обновление значения при обновлении страницы? Это приводит к тому, что отображаемое свойство будет пересчитываться на нескольких этапах жизненного цикла вашей страницы, но значение будет обновляться только один раз при загрузке страницы.Мягко говоря, не очень эффективно
  3. И почему бы вам не привязать переменную области действия к полю с помощью SSJS вместо использования EL, как в «#{viewScope.NavBarOption}»?
person Lothar Mueller    schedule 08.09.2015