gpt4 book ai didi

javascript - 无法让 iframe 工作

转载 作者:行者123 更新时间:2023-11-28 15:43:12 25 4
gpt4 key购买 nike

我基本上是在尝试创建一个页面,该页面可以同时显示用户选择的 3 个 Google 搜索。我有为图像执行此操作的代码(将去搜索 Flickr 上的输入并显示图像)但我认为将相同的概念应用于 Google 搜索会很酷。我做错了什么?

</style>
</head>
<body>

<div class="comic" >
<div id="panel-1" class="scene" >
<iframe id="search-1"></iframe>
<p id="topic-1">
Topic: <input type="text" id="topic-input-1">
<button onclick="setSearch(1)" class="set-search-button">Go</button>
</p>
</div>

<div id="panel-2" class="scene">
<iframe id="search-2"></iframe>
<p id="topic-2">
Topic: <input type="text" id="topic-input-2">
<button onclick="setSearch(2)" class="set-search-button">Go</button>
</p>
</div>

<div id="panel-3" class="scene">
<iframe id="search-3"></iframe>
<p id="topic-3">
Topic: <input type="text" id="topic-input-3">
<button onclick="setSearch(3)" class="set-search-button">Go</button>
</p>
</div>


<script>
function setSearch(panel){
var query;
query=document.getElementById("topic-input-"+panel).value
document.getElementById("search-"+panel).src ="https://www.google.ca/#q="+ query +"&*"

document.getElementById("topic-"+panel).style.display="none";
}

</script>

这是 CSS 代码:

<style>
.comic {
max-width: 826px;
margin: 60px auto 0;

}
.scene {
width: 250px;
height: 250px;
border: 3px solid black;
background: white;
margin: 8px;
display: inline-block;
position: relative;
}
.scene img {
width: 100%;
height: 100%;
display: block;
}

</style>

最佳答案

Google 正在防止跨源框架。然而,一些服务器确实为跨域请求设置了 X-Frame header 。

另请记住,如果您尝试从不安全的来源 (http) 访问安全信息 (https),​​内容也将被阻止

这是来自浏览器控制台的消息

Load denied by X-Frame-Options: https://www.google.ca/#q=f&* does not permit cross-origin framing.

关于javascript - 无法让 iframe 工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43176785/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com