Question

我是javascript的新手，但在HTML和CSS的中级。

所以这就是问题所在。我刚刚与Foxyform注册了第三方联系表格服务。他们提供了一个粘贴在页面中并上传的代码。它在桌面视图中工作正常，但是当访问不同移动设备或较小设备上的联系人页面时，它看起来没有空间且没有响应。没有选项可以在主题中的@media屏幕中进行编辑。

是否可以使此联系表格响应？

以下是代码：

HTML：

<a id="foxyform_embed_link_602624" href="http://www.foxyform.com/"></a>

使用Javascript：

(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = "http://www.foxyform.com/js.php?id=602624&sec_hash=54f3ab77bfb&width=350px";
s.parentNode.insertBefore(g, s);
}(document, "script"));

Answer 1

您的联系表单提供商在您的页面中包含 iframe 。

iframe 无法通过其所包含的网站进行样式设置，因为大多数浏览器将其作为嵌入在其他网页中的自己的网页进行处理。

Answer 2

找到CSS修复（不是jquery / javascript抱歉）（对于googleCalendar iframe）但我对foxyForms iframe使用了相同的概念。

通过https://thomas.vanhoutte.be/miniblog/make-google-calendar-iframe-responsive/

HTML

    <div class="responsiveCal">

      <iframe src="https://calendar.google.com/calendar/embed? showTitle=0&amp;showDate=0&amp;showPrint=0&amp;showCalendars=0&amp;showTz=0&amp;height=600&amp;wkst=2&amp;hl=nl&amp;bgcolor=%23FFFFFF&amp;src=example.be_cpkbjcpttgb5q0%40group.calendar.google.com&amp;color=%23ffcf03&amp;ctz=Europe%2FBrussels" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
    </div>

CSS

    .responsiveCal {

      position: relative; padding-bottom: 75%; height: 0; overflow: hidden;

    }

    .responsiveCal iframe {

      position: absolute; top:0; left: 0; width: 100%; height: 100%;

    }

它允许我在容器中放置一行以使用bootstraps响应类。希望这是对的，我还是初学者，请随时纠正我犯的任何错误..

使用Javascript响应此联系表单

2 个答案: