Я хочу сделать кнопку (радио, кнопку или флажок) на своем веб-сайте, чтобы пользователь мог перенаправить на другую страницу без перезагрузки всей страницы, я не профессионал в этом, но у меня мало знаний об AJAX, и единственное, что я знаю заключается в том, что это можно сделать, заменив существующее содержимое «div». Позвольте мне объяснить, чего я хочу здесь добиться: «Допустим, у меня есть три переключателя на моем веб-сайте с ярлыками (Google, YouTube и Facebook). Все, что я хочу сделать, это когда пользователь нажимает кнопку Google, он должен отображать домашнюю страницу Google. оставаясь на той же странице без перезагрузки страницы, и веб-сайт Google должен открываться под переключателями, а остальные кнопки должны делать то же самое».
<!DOCTYPE HTML>
<html>
<style>
.test1 {
width: 100%;
height: 50%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").click(function(){
$("#test").load(location.href = "https://www.google.com");
});
});
</script>
<div>
<center><p><strong>Websites:</strong>
<input type="radio" id="google" name="web">
<label for="google">Google</label>
<input type="radio" id="youtube" name="web">
<label for="youtube">YouTube</label>
<input type="radio" id="fb" name="web">
<label for="fb">Facebook</label></p></center>
</div>
<div id="test" class="test1">
//Websites should be loaded here//
</div>
</html>
Требуются мнения экспертов, примеры или демо-версии приветствуются:-)
Обновление: я добавил свой код, над которым сейчас работаю. В настоящее время при нажатии на любой переключатель будет отображаться домашняя страница Google, но не динамически, потому что я не знаю, как заставить его работать в AJAX.
Решение проблемы
Это невозможно, я рассмотрел это для вас
Единственный способ сделать это — использовать iframe, однако все вышеперечисленные веб-сайты имеют функцию, известную как CORS, которая проверяет, загружается ли веб-сайт из родительского домена или из другого родительского домена. Таким образом, для этого не кажется выполнимым!
ОБНОВИТЬ
Вот очень простой пример (очень простой JS) в соответствии с запросом в комментариях. Надеюсь мысль понятна!
window.addEventListener('load', one);
document.getElementById("one").addEventListener("click", one);
document.getElementById("two").addEventListener("click", two);
document.getElementById("three").addEventListener("click", three);
function one() {
['example2', 'example3'].forEach(function(id) {
document.getElementById(id).style.display = "none";
document.getElementById("example1").style.display = "block";
});
}
function two() {
['example1', 'example3'].forEach(function(id) {
document.getElementById(id).style.display = "none";
document.getElementById("example2").style.display = "block";
});
}
function three() {
['example1', 'example2'].forEach(function(id) {
document.getElementById(id).style.display = "none";
document.getElementById("example3").style.display = "block";
});
}.iframe {
width: 100vw;
height: 85vh;
} <title>Example</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.0.2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="mt-3 mx-3 text-center">
<li class="row">
<ul class="col-md"><button id="one">Example 1</button></ul>
<ul class="col-md"><button id="two">Example 2</button></ul>
<ul class="col-md"><button id="three">Example 3</button></ul>
</li>
</nav>
<div id="example1">
<p>Page 1</p>
<iframe src="https://example.com" class="iframe" frameborder="0"></iframe>
</div>
<div id="example2">
<p>Page 2</p>
<iframe src="https://example.com" class="iframe" frameborder="0"></iframe>
</div>
<div id="example3">
<p>Page 3</p>
<iframe src="https://example.com" class="iframe" frameborder="0"></iframe>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
Комментариев нет:
Отправить комментарий