在新页面上的iframe中打开链接

Question

嗨，我有一个可行的解决方案，并且摘要有所更改，这意味着我现在需要找到解决方法。

场景是我有一个按钮，单击该按钮可在iframe中打开特定的网址。 使用以下代码，效果很好：

<a class="two_nights iframebutton_pink" href="buttonurl" target="bookingiframe" onclick="location.href='#booking'">Januar</a>

<script>
$("[target='bookingiframe']").on('click',function () {
  $("#ifr").attr('src',$(this).attr('href'));
  scrollt();
});
</script>

这是向下移动到页面上的iframe并更改了源。 这是iframe：

`<a id="booking"><div class="frame_container"><iframe name="bookingiframe" src="generalurl" width="100%" height="8000" frameborder="0" scrolling="0"></iframe></div></a>`

现在，iframe的内容必须位于白名单上的页面上，因此该解决方案不起作用。 我需要做的是单击按钮，然后在iframe启用的情况下打开新页面，并将URL更改为按钮的URL。

任何帮助将非常感激。

Answer 1

您需要使用iframe创建页面。

假设网址是yoursite.com/iFrame.html

现在，您需要将预订URL发送到该新页面。 因此，我们将使用URL参数来执行此操作。

因此，您的最终到达网址应类似于yoursite.com/iFrame.html*?url=h#tp://www/bookingurl.com.....*

现在，在新页面上，您需要以下额外的代码来从参数获取URL并加载iFrame。

function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

现在粘贴之后，您可以使用代码填充iFrame。

<script>
$(document).ready(function () {
  $("#ifr").attr('src',getParameterByName(url));
});
</script>

函数getParameterByName读取预订UR1并加载Iframe。

所以最终的代码将是

<a class="two_nights iframebutton_pink" href="yoursite.com/iFrame.html*?url=h#tp://www/bookingurl.com....." target="bookingiframe" target="_blank">January</a>

和上面的JS代码