無法讓iframe工作

我基本上正在嘗試創建一個頁面，可以同時顯示用戶選擇的3個Google搜索。我有這樣做的圖像代碼（將去搜索Flickr上的輸入並顯示圖像），但我認爲將相同的概念應用於Google搜索會很酷。我究竟做錯了什麼？無法讓iframe工作

</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>

來源

2017-04-03 Big AA

你現在的代碼有什麼問題？它應該做什麼，它做了什麼呢？ – Teemu

@Teemu它顯示輸入框，但當我輸入東西時什麼也沒有顯示 –

看起來你的代碼希望你點擊一個按鈕來執行你的代碼..？ – Teemu

谷歌是防止交叉起源framming。但是，某些服務器會將該X-Frame標頭設置爲跨域請求。

還要記住的內容也將被告知是否阻止你一個試圖從一個不安全的源（HTTP）

這是從瀏覽器控制檯消息訪問安全信息（HTTPS）

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

來源

2017-04-03 05:05:25 repzero

哦，好吧，這是有道理的。有沒有任何網站可以與此合作？我試圖做這個工作（應該是創意） –

我不能說脫手..你可能不得不嘗試幾個來源。 – repzero

無法讓iframe工作

回答

相關問題