javascript - 在父 Html 页面上的 Iframe 中显示另一个 html 页面

标签 javascript html iframe

我有一个基本 html 页面,并且有一个 div,单击该 div 应该会在同一基本 html 页面上显示另一个 html 页面,位于我已插入并保留为 display:none 的 iframe 中。

请大家帮忙!!!

the screenshots shows the div on which i am clicking and whole page should get replaced by another html page in an iframe

下面是基本 html 页面上的 iframe 和 html,其中包含一个 js 函数,我试图实现该函数来实现此目的...

        <iframe id='ifr'></iframe>
        <span id="previousemployment" onclick="previousemploymentIframe()">Previous Employment</span>

JS 是

      function previousemploymentIframe() 
      {
         document.getElementById("ifr").src ='PreviousEmployment.html';
      }

最佳答案

查看此代码片段并将代码应用到您自己的页面。据我所知,您正在使用跨度的文本作为链接/按钮?

function prevEmpIframe() {
  var ifr = document.getElementById("ifr");
  ifr.src = 'PreviousEmployment.html';
}

//Crossbrowser Access of Iframe from Parent Page

var doc = iframe.contentDocument ? iframe.contentDocument : 
(iframe.contentWindow ? iframe.contentWindow.document : iframe.document);
#prevEmp.show {
  display: block;
}
#prevEmp.hide {
  display: none;
}
#prevEmp { cursor: pointer; }
<!doctype html>
<html>

<head>
  <base href="/" target="_self">
  <meta charset="utf-8">
  <style>
  </style>
</head>

<body>
  <section>
    <span id="prevEmp" onclick="prevEmpIframe()">Previous Employment
          <iframe id='ifr' src="/"></iframe>
      </span>
  </section>
  <script>
  </script>
</body>

</html>

关于javascript - 在父 Html 页面上的 Iframe 中显示另一个 html 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33852221/

相关文章:

javascript - 如何从node.js中的二维数组中获取随机项

php - 单击页面元素并将它们用作表单数据

android - css 气泡不会在 android 上显示

javascript - 在 iframe 中加载一个 cshtml 文件(razor)

jquery - iframe 与 div + jquery

javascript - 导致移动设备水平滚动的 Facebook Like 按钮

javascript - 如何在 javascript/Ajax 中添加重试

javascript - 我有一个数组,我想将其更改为包含最后一个子元素的新数组

javascript - 无效的 JSON 原语 - Asp.Net MVC 4

javascript - 选择标签和类并获取自定义属性