Question

我正在使用Codiqa，一个移动原型制作工具，它在其中创建带有iframe的div id图层，菜单链接只是转到那个DIV id而没有任何实际的页面加载;因此，当最初加载主应用程序菜单时，所有div和它们各自的iframe同时加载，然后一切都可以通过div id导航以进行页面链接。这里的问题是我正在处理在导航菜单时可能已更新的内容，因此如果内容发生更改并且您单击菜单项，则iframe不会刷新并加载任何新的或更新的内容;我每次都需要手动刷新浏览器以查看更改！我怎样才能解决这个问题？我想在菜单链接上放置一个javascript函数，但不知道如何去做。提前谢谢！

enter image description here

HTML

<ul data-role="listview" data-divider-theme="b" data-inset="true">
                <li data-role="list-divider" role="heading">Apps</li>
                <li data-theme="">
                    <a href="#page16" data-transition="flip">
                  Central Office Survey
              </a>
                </li>
               <!-- <li data-theme="">
                    <a href="#page18" data-transition="flip">
                  Manhole
              </a>
                </li>-->
                <li data-theme="">
                    <a href="#page21" data-transition="flip">
                  Prepping A
              </a>
           <!--     </li>

        <li data-theme="c">
                    <a href="#page19" data-transition="flip">
                  Prepping A
             </a>
    -->
                </li>
                <li data-theme="c">
                    <a href="#page20" data-transition="flip">
                  Prepping Z
             </a>
                </li>
                <li data-theme="c">
                    <a href="#page17" data-transition="flip">
                  Extracting
              </a>
                </li>
                <li data-theme="c">
                    <a href="#page15" data-transition="flip">
                  Warehouse
              </a>
                </li>
                 <li class="sample">
                    <a href="#page22" data-transition="flip">
                  Sample
              </a>
                </li>
            </ul>

  <!-- Extracting -->
    <div data-role="page" id="page17">
        <div data-theme="a" data-role="header" id="frame_header">
            <a href="http://gp21.idmyasset.com/mobile/" target="_parent" data-transition="flip">Return To Main Menu</a>
            <h3>Extracting</h3>
        </div>
        <div data-role="content">
            <iframe src="http://gp21.idmyasset.com/mobile/extraction/" id="Cable_Extraction_Worksheet"
            name="Cable_Extraction_Worksheet" class="contentiframe"></iframe>
        </div>
        <div data-role="tabbar" data-iconpos="left" data-theme="a">
            <ul>
                <li>
                    <a href="http://gp21.idmyasset.com/mobile/extraction/" target="Cable_Extraction_Worksheet" data-transition="flip" data-theme="" data-icon="arrow-l">
                  Back
              </a>
                </li>
                <li>
                    <a onclick="document.getElementById('Cable_Extraction_Worksheet').contentWindow.location.reload();" data-transition="none" data-theme="" data-icon="minus">
                  Reset
              </a>
                </li>
                <li>
                    <a onclick="document.getElementById('Cable_Extraction_Worksheet').contentWindow.uploaddata();" data-transition="none" data-theme="" data-icon="check">
                  Submit
              </a>
                </li>
            </ul>
        </div>
    </div>

<div data-role="page" id="page22">
        <div data-theme="" data-role="header" id="frame_header">
            <a href="http://gp21.idmyasset.com/mobile/" target="_parent" data-transition="flip">Return To Main Menu</a>
            <h3>Sample</h3>
        </div>
        <div data-role="content">
            <iframe src="http://gp21.idmyasset.com/mobile/sample/" name="sample" id="sample" class="contentiframe"></iframe>
            <script type="text/javascript">
                document.frames['sample'].location.reload(true);
            </script>
        </div>
        <div data-role="tabbar" data-iconpos="left" data-theme="a">
            <ul>
                <li>
                   <a href="http://gp21.idmyasset.com/mobile/" target="_parent" data-transition="flip" data-theme="" data-icon="arrow-l">
                  Back
              </a>
                </li>
                <li>
                    <a onclick="document.getElementById('sample').contentWindow.location.reload();" data-transition="none" data-icon="minus">
                  Reset
              </a>
                </li>
                <li>
                <!--Use Submit Validation Function for iFrame Form-->
                    <a onclick="sample.submitForm();" data-transition="flip" data-icon="check">
                  Submit
              </a>
                </li>
            </ul>
        </div>
    </div>

Answer 1

酷你用Codiqa，我做到了：）

您可以通过在该页面上监听pageshow事件并触发刷新来执行您的请求：

$('#page22').on('pageshow', function() { 
  $('#sample').attr("src", $('#sample').attr("src"));
});

我们最近添加了更改页面ID的支持，因此您现在可以自定义它。

需要刷新iFrame内容（在Div中加载页面内容）

1 个答案: