javascript - 需要刷新 iFrame 内容(在 Div 中加载页面内容)

Question

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

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 的支持，因此您现在就可以对其进行自定义。