Question

我有用PHP编写的电子邮件表单。我网站上的团队成员都有自己的电子邮件地址。我没有为每个团队成员创建一个电子邮件联系表单的网页，而是使用按钮重定向到与该团队成员联系的每个表单的iFrames。。所以我有三个iFrame，每个都有2个按钮。我将为一些iFrame添加更多按钮。我目前的代码不起作用。按钮不起作用。

＆＃13;

body {
    margin: 0;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.embed-responsive::before {
    display: block;
    content: "";
}

.embed-responsive-16by9::before {
    padding-top: 56.25%;
}

.embed-responsive .embed-responsive-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.col-md-4 {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}

@media(min-width: 768px) {
    .col-md-4 {
        max-width: 33.33333%;
        flex: 0 0 33.33333%;
    }
}

＆＃13;

accept
You can use below code for 3 columns

HTML:

<body>
    <div class="row">
      <div class="col-md-4">
        <input type="button" onclick="two.location.href='http://google.com/';document.getElementById('two').frameBorder=1" value="T" />
        <input type="button" onclick="two.location.href='http://yahoo.com/';document.getElementById('two').frameBorder=1" value="U" />
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
        </div>
      </div>
      <div class="col-md-4">
        <input type="button" onclick="two.location.href='http://www.phpform.org/';document.getElementById('two').frameBorder=1" value="T" />
        <input type="button" onclick="two.location.href='http://youtube.com/';document.getElementById('two').frameBorder=1" value="U" />
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
        </div>
      </div>
      <div class="col-md-4">
        <input type="button" onclick="two.location.href='http://mail.com/';document.getElementById('two').frameBorder=1" value="T" />
        <input type="button" onclick="two.location.href='http://php.net/';document.getElementById('two').frameBorder=1" value="U" />
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </body>

＆＃13;

我希望能够点击按钮，在iFrame中打开另一个页面。我想将每个按钮专用于此功能。请帮忙。

@Grfried那不起作用。这是我的原始代码。我在S.O上有一个帖子，我问我如何为我的iFrame制作列。一旦我使用CSS脚本编写代码，我的iFrames按钮将无效。这是我在CSS列脚本之前的原始代码。下面的代码有工作按钮，但我希望代码分为三列。我尝试了一些没有成功的事情。

＆＃13;

<p><input type="button" onclick="one.location.href='https://klientboost.com/';document.getElementById('one').frameBorder=1" value="T">
<input type="button" onclick="one.location.href='https://klientboost.com/#getProposal';document.getElementById('one').frameBorder=1" value="U">
<br><iframe src="https://cdn.dribbble.com/users/3506/screenshots/937913/gameover.png" name="one" id="one" marginwidth="10" marginheight="" width="300" height="300"sandbox="allow-forms allow-pointer-lock allow-scripts allow-top-navigation"> </iframe></p>

<p><input type="button" onclick="two.location.href='https://klientboost.com/';document.getElementById('two').frameBorder=1" value="T">
<input type="button" onclick="two.location.href='https://klientboost.com/#getProposal';document.getElementById('two').frameBorder=1" value="U">
<br><iframe src="https://cdn.dribbble.com/users/3506/screenshots/937913/gameover.png" name="two" id="two" marginwidth="10" marginheight="" width="300" height="300"sandbox="allow-forms allow-pointer-lock allow-scripts allow-top-navigation"> </iframe></p>

<p><input type="button" onclick="three.location.href='https://klientboost.com/';document.getElementById('three').frameBorder=1" value="T">
<input type="button" onclick="three.location.href='https://klientboost.com/#getProposal';document.getElementById('three').frameBorder=1" value="U">
<br><iframe src="https://cdn.dribbble.com/users/3506/screenshots/937913/gameover.png" name="three" id="three" marginwidth="10" marginheight="" width="300" height="300"sandbox="allow-forms allow-pointer-lock allow-scripts allow-top-navigation"> </iframe></p>

＆＃13;

Answer 1

＆＃13;

<p><input type="button" onclick="document.getElementById('one').src='https://klientboost.com/#getProposal'" value="T">
<br><iframe src="https://cdn.dribbble.com/users/3506/screenshots/937913/gameover.png" name="one" id="one" marginwidth="10" marginheight="" width="300" height="300"sandbox="allow-forms allow-pointer-lock allow-scripts allow-top-navigation"> </iframe></p>

<p><input type="button" onclick="document.getElementById('two').src='https://klientboost.com/#getProposal'" value="T">
<br><iframe src="https://cdn.dribbble.com/users/3506/screenshots/937913/gameover.png" name="two" id="two" marginwidth="10" marginheight="" width="300" height="300"sandbox="allow-forms allow-pointer-lock allow-scripts allow-top-navigation"> </iframe></p>

<p><input type="button" onclick="document.getElementById('three').src='https://klientboost.com/#getProposal'" value="T">
<br><iframe src="https://cdn.dribbble.com/users/3506/screenshots/937913/gameover.png" name="three" id="three" marginwidth="10" marginheight="" width="300" height="300"sandbox="allow-forms allow-pointer-lock allow-scripts allow-top-navigation"> </iframe></p>

＆＃13;

iFrame的位置是src，而不是href：

的onclick =＆＃34;的document.getElementById（＆＃39; 2＆＃39）。SRC =＆＃39; https://google.com/＆＃39;＆＃34;
为iframe提供ID

＆lt; iframe id =＆＃34; 2＆＃34;类=＆＃34;嵌入响应项＆＃34; SRC =＆＃34;＆＃34;＆GT;＆LT; / iframe中＆GT;
您的示例网址（例如Google）不会加载到iFrame中，因为他们已在标题中设置X-Frame-Options: SAMEORIGIN。

iFrame按钮不起作用

1 个答案: