如何在div中打开第三方

Question

下面的代码不能正常工作，任何人都知道这个问题为什么会发生。 我想在我们的网站 body div 上打开外部网站。

<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">jQuery 3.1.1</a> 
    
    <style >
        #content{height:250;width:500px;}

    #content object{height:100%;width:100%;}

    </style>

    <script >$(document).ready(function(){ 
    $('a').on("click", function(){
    event.preventDefault();
   
    
    // Load External pages.

    $("#content").html('<object data="'+this.getAttribute('href')+'" />');
    });
    });</script>

 
```Html Code```

    <a href="https://www.google.com">Google</a>
    <div id="content"></div>

</body>
</html>

Answer 1

您要使用 iframe 吗？

HTML 内联框架元素“iframe”表示嵌套浏览上下文，将另一个 HTML 页面嵌入当前页面。

<iframe id="inlineFrameExample"
title="Inline Frame Example"
width="300"
height="200"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">

Answer 2

如果不是同一来源，则并非每个网站都可以加载到框架中，例如在您的情况下 google.com 将X-Frame-Options （标题）设置为sameorigin 。

没有办法绕过它，除非你为 chrome 扩展做这个，你必须修改响应以删除 X-Frame-Options header 并且一切都会正常工作。

您可以从此处阅读有关X-Frame-Options更多信息： https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

如果您想了解如何在制作 Chrome 扩展程序时删除 X-Frame-Options，请在 Chrome 扩展程序中绕过 X-Frame-Options DENY？

如何在div中打开第三方

问题描述

2 个解决方案

解决方案1
0 2020-12-23 20:50:35

解决方案2
0 2020-12-23 20:52:32

如何在div中打开第三方

问题描述

2 个解决方案

解决方案1 0 2020-12-23 20:50:35

解决方案2 0 2020-12-23 20:52:32

解决方案1
0 2020-12-23 20:50:35

解决方案2
0 2020-12-23 20:52:32