Question

我正在尝试一些简单的事情，但是我遇到了一些问题，我想今天完成。

我有一个网站页面，其中包含以下内容：

<button type="button" class="btn btn-primary btn1" data-toggle="modal" href="https://teespring.com/es/camiseta-gymsroka-deportiva?tsmac=store&tsmic=sroka-merchandising-2#pid=373&cid=100035&sid=front" data-target="#myModal" >Pedir ahora</button>

我有一个这样的带有jQuery的eventListener：

$('.btn1').on('click', function(e) {
            e.preventDefault();
            var url = $(this).attr('href');
            $(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');
            });

因此，当单击按钮时，它会加载一个模式，而在该模式内，它将在href属性上加载所需的网站，我的模式尾语是：

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
    aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal">
 <div class="modal-dialog modal-lg">
   <div class="modal-content">
        <div class="modal-body">
            </div>
   </div>
 </div>
</div>

非常简单的模态。好吧，当我单击按钮时出现问题，在chrome上，它可以工作，它可以打开模式并正确加载url，但是在console.log上却显示很少的错误，如下所示：

Invalid 'X-Frame-Options' header encountered when loading 'https://teespring.com/es/camisa-de-tirantes-gymsroka?tsmac=store&tsmic=sroka-merchandising-2#pid=408&cid=100232&sid=front': 'ALLOW-FROM https://www.facebook.com' is not a recognized directive. The header will be ignored.

在firefox中，它告诉我错误，但不加载任何内容...

我该如何解决？如果有可能的解决方法，或者你们是如何做到的？我的目标是在我的网站上放一些物品并将其“出售”给用户，但是销售过程是由另一家公司进行的，因此对我来说更容易和更便宜。我该怎么办？谢谢团队！

Answer 1

发生该错误是因为您要在iframe中加载的网站拒绝使用http标头进行加载。

网站应通过配置X-Frame-Options标头来允许

您可以在此处阅读更多内容。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

单击按钮时，以模式显示网站？

1 个答案: