Замените iframe src

Question

Извините, если я создал новую ветку для этого, но я не нашел решения в другом месте.Я новичок в веб-дизайне, и я играл с тегом <iframe>.

Я использовал javascript для отображения графического графика из Google Sheets.Каждый раз, когда я нажимаю на ссылку, которая открывает график (связанный iframe), график снова отображается под предыдущим графиком, а моя страница HTML удлиняется.Я не хочу, чтобы это случилось.Вместо этого я хотел бы заменить старый график новым графиком в тех же полях, что и в предыдущих сгенерированных графиках.

<script>
function myFunction() {
    var x = document.createElement("IFRAME");
    x.setAttribute("src", "#Link_to_Google_sheet_chart");
    x.height = "400";
    x.width = "545";
    x.style.margin = "100px 20px 200px 450px";
    document.body.appendChild(x);
}
</script>

Answer 1

Вы можете назначить id для iframe и заменить его в следующий раз, как показано ниже

function myFunction() {
    var x = document.getElementById('unique-id');
    if(typeof(x) !== 'undefined'){ //if iframe is appended only change src
      return x.setAttribute("src", "#Link_to_Google_sheet_chart");
    }
    x = document.createElement("IFRAME");
    x.id = 'unique-id';
    x.setAttribute("src", "#Link_to_Google_sheet_chart");
    x.height = "400";
    x.width = "545";
    x.style.margin = "100px 20px 200px 450px"; 
    return document.body.appendChild(x);

}

Answer 2

Прежде всего, вы не должны иметь ссылку с префиксом #.Используйте https://link.com

Вы пробовали это?

x.src = "https://link.com";

Если это не сработает, возможно, попробуйте это:

function myFunction() {
    var x = document.createElement("IFRAME");
    x.setAttribute("src", "https://link.com");
    x.height = "400";
    x.width = "545";
    x.style.margin = "100px 20px 200px 450px";
    x.id = "iframe-0";
    document.body.appendChild(x);
}
function switch() {
    document.getElementById('iframe-0').style.display = "none";
    // create new iframe here, then append it
    var y = document.createElement("IFRAME");
    y.setAttribute("src", "https://link.com");
    y.height = "400";
    y.width = "545";
    y.style.margin = "100px 20px 200px 450px";
    y.id = "iframe-1";
    document.body.appendChild(y);
}