我不知道如何将 iframe 链接到按钮答案

【问题标题】：I Can't Figure Out How To Link an iframe to a Button我不知道如何将 iframe 链接到按钮
【发布时间】：2017-01-07 02:12:52
【问题描述】：

我想将一个 iframe 链接到一个按钮，这样我就可以通过点击我网站上的“保持发布”按钮打开下面的 iframe（iframe/模型窗口）：http://www.aphealthnetwork.com。

iframe 代码：

<iframe  width='810px' height='770px' src='https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2'></iframe>

按钮代码：

<div class="buttons"><a href="https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2" class="solid">Keep Me Posted!</a> or <a href="index.html#pricing" class="inline scroll">learn more</a></div>

我一直在寻找和寻找，在任何地方都找不到答案。

【问题讨论】：

您在哪里尝试打开 iframe？在同一页面上？
您是否只是想将链接设置为按钮样式？我不太关注

标签： javascript jquery html css iframe

【解决方案1】：

不确定最终目标到底是什么，但是如果您想在单击按钮时在模态中显示 iframe，您可以将 iframe 放在模态的元素中，默认隐藏，然后显示单击按钮时的模态。我还添加了一个链接来关闭模型。您可能还想调整模态框的高度/宽度以满足您的需要。或者让我知道最终目标是什么，我可以提供帮助。

$('.buttons a').on('click',function(e) {
  if ($(window).width() > 820) {
    e.preventDefault();
    $('#modal').show();
  }
});

$('.close').on('click',function(e) {
  e.preventDefault();
  $('#modal').hide();
})

#modal {
  display: none;
  background: rgba(0,0,0,0.5);
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

iframe {
  position: absolute;
  top: 1em; left: 50%;
  transform: translate(-50%,0);
}

.close {
  position: absolute;
  top: 1em; right: 1em;
  background: black;
  color: white;
  padding: .5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons"><a href="https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2" class="solid">Keep Me Posted!</a> or <a href="index.html#pricing" class="inline scroll">learn more</a></div>


<div id="modal">
  <a class="close" href="#">close</a>
  <iframe  width='810px' height='770px' src='https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2'></iframe>
</div>

【讨论】：

嗨，迈克尔，非常感谢您的帮助 :) 这几乎正是我的想法。您是否也碰巧知道如何使它具有响应性，因为它不适用于我的 iPhone？
此外，由于 iframe 周围有一个不合适的边界，因此它使 CSS 有点偏离。关于如何解决这个问题的任何想法？再次非常感谢迈克尔，我真的很感激！
@chrish83 没问题。看起来 iframe 的内容不会响应。内部的固定宽度为 800 像素。因此，除非您可以控制该 iframe 中的内容，否则它不会响应。并且回复：边框，您可以将border: 0; 提供给 iframe，它会删除它。默认情况下，iframe 在大多数浏览器中都有边框。
我明白了。感谢边框修复！有没有办法设置它，以便在移动设备上查看时按钮会变为链接，以便我可以将 iframe 表单链接到单独的页面？
@chrish83 是的，有很多方法可以解决这个问题，但我更新了代码 sn-p 以在触发模态之前检查 $(window).width() > 820。 820 表示设备上的浏览器宽度。我将其设置为 820，因为 iframe 中的代码宽度希望为 800px 宽，但您可以随意调整它以适应您的需求。

【解决方案2】：

只需使用<input type='button' class='buttons' id='kmp' value='Keep Me Posted' /> 或类似的东西...然后你可以制作一个输出元素<iframe id='output'></iframe> 并使用jQuery 执行此操作：

$(function(){

$('#kmp').click(function(){
  $('#output').css('display', 'block').attr('src', 'https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2');
}

}

您还需要确保src 也是完整的文档。我看到它不是。如果你想用#output{display:none;} 开始你的CSS，我把.css('display', 'block') 扔进去了。

【讨论】：

【解决方案3】：

你到底想要什么？对于响应式模态外观here

如果要显示模态内容，类似的问题是here

如果您只想显示 iframe，请使用 jquery。

或者看Display website in modal

【讨论】：