英文:
I want to be able to search 2 websites side-by-side in iframes, using just one search bar. Is my Javascript wrong?
问题
我已经在这个页面上使用HTML创建了搜索控制台：
<title>搜索结果</title>
<style>
iframe {
width: 100%;
height: 500px;
border: none;
margin-top: 20px;
}
</style>
<h1>搜索结果</h1>
<form onsubmit="search(event)">
<input type="text" id="search-box" placeholder="输入关键词">
<button type="submit">搜索</button>
</form>
<iframe id="search-results"></iframe>
<iframe id="search-results"></iframe>
我的Javascript代码是：
<script>
function search(event) {
event.preventDefault();
var keywords = document.getElementById('search-box').value;
var url1 = 'https://www.vistaprint.fr/search?query=' + keywords;
var url2 = 'https://www.vistaprint.com/search?query=' + keywords;
var iframe = document.getElementById('search-results');
iframe.src = url1 + '&' + url2;
}
</script>
理想情况下，我希望看到两个并排显示的iframe作为搜索结果，但在这种情况下只显示了"url1"。我是否漏掉了一部分代码？
英文:
I have created the search console in HTML on a page here:
<title>Search Results</title>
<style>
iframe {
width: 100%;
height: 500px;
border: none;
margin-top: 20px;
}
</style>
<h1>Search Results</h1>
<form onsubmit="search(event)">
<input type="text" id="search-box" placeholder="Enter keywords">
<button type="submit">Search</button>
</form>
<iframe id="search-results"></iframe>
<iframe id="search-results"></iframe>
My Javascript is:
<script>
function search(event) {
event.preventDefault();
var keywords = document.getElementById('search-box').value;
var url1 = 'https://www.vistaprint.fr/search?query=' + keywords;
var url2 = 'https://www.vistaprint.com/search?query=' + keywords;
var iframe = document.getElementById('search-results');
iframe.src = url1 + '&' + url2;
}
</script>
Ideally, I would like to see two iframes shown side-by-side as search results, but only 'url1' shows in this instance. Am I missing a piece of code?
Ideally, I would like to see two iframes shown side-by-side as search results, but only 'url1' shows in this instance. Am I missing a piece of code?
答案1
得分: 0
你代码中的问题就像你的问题评论中已经解释的那样，你正在使用 'getElementById'，它会返回一个元素。
你可以为你的iframe元素添加标记，这样你可以使用 'getElementsByTagName'，它将返回一个包含2个元素的数组。
之后，你可以像这样为你的iframe元素添加src：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Search Results</title>
</head>
<body>
<h1>Search Results</h1>
<form onsubmit="search(event)">
<input type="text" id="search-box" placeholder="Enter keywords" />
<button type="submit">Search</button>
</form>
<iframe id="search-results-fr" name="iframe"></iframe>
<iframe id="search-results-en" name="iframe"></iframe>
</body>
<script>
function search(event) {
event.preventDefault();
var keywords = document.getElementById("search-box").value;
var url1 = "https://www.vistaprint.fr/search?query=" + keywords;
var url2 = "https://www.vistaprint.com/search?query=" + keywords;
var iframe = document.getElementsByTagName("iframe");
iframe[0].src = url1;
iframe[1].src = url2;
}
</script>
</html>
英文:
The problem in your code is like the comment to your question already explained, that you are using 'getElementById' wich gives you 1 element back.
You could add tags to your iframe elements so you can use 'getElementsByTagName' which will result in an array of 2 elements.
After this you can add the src as you like to your iframe elements like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Search Results</title>
</head>
<body>
<h1>Search Results</h1>
<form onsubmit="search(event)">
<input type="text" id="search-box" placeholder="Enter keywords" />
<button type="submit">Search</button>
</form>
<iframe id="search-results-fr" name="iframe"></iframe>
<iframe id="search-results-en" name="iframe"></iframe>
</body>
<script>
function search(event) {
event.preventDefault();
var keywords = document.getElementById("search-box").value;
var url1 = "https://www.vistaprint.fr/search?query=" + keywords;
var url2 = "https://www.vistaprint.com/search?query=" + keywords;
var iframe = document.getElementsByTagName("iframe");
iframe[0].src = url1;
iframe[1].src = url2;
}
</script>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论