如何在单击放置在 Iframe 内的锚标记时执行 jQuery 函数答案

【问题标题】：How to execute a jQuery function on click of an anchor tag which is placed inside an Iframe如何在单击放置在 Iframe 内的锚标记时执行 jQuery 函数
【发布时间】：2018-01-23 15:07:23
【问题描述】：

我的应用程序中有一个网页，其中在页面加载时加载了 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。

通过单击锚标记，用户可以导航到任何页面。单击锚标记时，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。

我尝试在锚点点击事件上添加 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);
    });
});

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

【问题讨论】：

您是否在 iframe 中使用 jQuery $.ajax 来加载新内容？
@charlietfl 是的，自定义的 javascript 框架使用 ajax 和prototype.js 作为基础。
你能在 iframe 中添加一个 ajaxSuccess 全局处理程序吗？
@charlietfl 我认为这是不可能的。我们有几个依赖同一个文件。我们不能避免编辑 iframe 创建部分吗？

标签： javascript jquery html

【解决方案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>

【讨论】：

另外，我注意到页面底部有一个无关紧要的 </iframe> 标记。我建议删除它。
谢谢。我删除了它。
感谢您保存我的 ___ 。现在每次单击锚点时都会触发 updateView 功能。谢谢。

【解决方案2】：

您可以在 iframe 中使用 ajaxComplete 来触发您的更新：

$(function() { 
  // iframe in main page   
  $('iframe').on('load', function() {

     updateView()// first load update

    // reference to window and document inside frame
    var win = this.contentWindow || this,
      doc = this.contentDocument || this.contentWindow.document;

    // have to use iframe version of jQuery
    win.$(doc).ajaxComplete(function(event, xhr, settings) {
      // fires every time an ajax request completes in iframe
      updateView()
    });
  });
});

DEMO

【讨论】：