javascript - 如何在单击放置在 Iframe 内的 anchor 标记时执行 jQuery 函数

Question

我的应用程序中有一个网页，在页面加载时加载了一个 iframe。iframe 显示在我们的应用程序中创建的自定义文档。 iframe 名称是动态生成的，内容由自定义 Javascript 框架加载。该文件有两个主要的垂直部分。第一垂直部分具有向用户显示的页面列表，以便用户可以导航到第n页。

<iframe id="xyz15031550Iframe0" name="xyz15031550Iframe0" scrolling="no" src="/displaydocument/2339389/15031550?doc=100" style="height: 989px;" width="1277px" height="963px" frameborder="0">

<div class="containerFull">

<div class="allPages" id="allPages">

   <a class="pagenumber_001" href="/document/2339389/15031550">Page 1</a>
   <a class="pagenumber_002" href="/document/2339389/15031550">Page 2</a>
   <a class="pagenumber_003" href="/document/2339389/15031550">Page 3</a>

</div>
<div id="pagesArea">
  <div class="docPage" id="page_body_001">
    <div id="docPageSection-001-1">
      PAGE CONTENT
    </div>
  </div>
</div>
</div>
</iframe>

页面加载时，iframe 将显示页面 1。

通过单击 anchor 标记，用户可以导航到任何页面。单击 anchor 标记后，iframe 将重新加载页面详细信息，并将其发送到后端。

由于某些页面的宽度较大，并且用户不希望出现水平滚动，因此我正在调整 iframe 容器和两个 div 的宽度，以使它们正确显示在窗口上。

`

<script src="adjust_doc_view.js"></script>
// the above script contains a jQuery function called updateView which basically 
// has css related jQuery statements.
jQuery(window).on('load', function () {
    setTimeout(updateView, 100); // timeout is used to wait for the iframe to load completely
});

`

我面临的问题是 updateView 仅在页面加载时触发一次。在 Iframe 的所有后续重新加载中，不会调用 updateView。那是因为我没有加载整个页面。我还有其他位于 iframe 之上的 div，它们是恒定的。让我知道如何在每次重新加载 iframe 内容时触发 updateView。

我尝试在 anchor 单击事件上添加 onclick 函数，但它只能运行一次。我不知道为什么。

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

jQuery(window).on('load', function () {
    // use setTimeout() to execute
    // Setting the timeout to zero as no delay is experienced in this page.
    setTimeout(updateView, 0);

    jQuery("div[id^='artifactDiv']").find("iframe[id^='xyz']").contents().find("a[class^='pagenumber']").on('click', function() {
        setTimeout(updateView, 1000);
    });

    jQuery("div[id^='artifactDiv']").find("iframe[id^='xyz']").contents().find("div[id^='docPageSection']").on('load', function() {
        setTimeout(updateView, 1000);
    });
});

请帮帮我。如果我做错了什么，请纠正我。提前致谢。

Answer 1

如何将 onload 属性添加到您的 iframe 并从那里调用 updateView()？

<iframe onload="setTimeout(function() { updateView(); }, 1000);" id="xyz15031550Iframe0" name="xyz15031550Iframe0" scrolling="no" src="/displaydocument/2339389/15031550?doc=100" style="height: 989px;" width="1277px" height="963px" frameborder="0"></iframe>