Блог

Главная - Вопросы по программированию - JavaScript: window.open не отображает фоновое изображение

JavaScript: window.open не отображает фоновое изображение

#javascript #background-image

#javascript #background-image

Вопрос:

Пожалуйста, помогите мне, я работал над этим часами. Я только начал играть с JavaScript.

Итак, у меня есть кнопка, которая загружает новое окно браузера, загружает фоновое изображение. Как показано ниже, никаких проблем.

HTML

 <script>
        setBackground();
</script>

JavaScript

 function setBackground() {
    document.body.style.backgroundColor = "#000000";
    document.body.style.backgroundImage = "url(bg.jpg)"
}

Затем я пытаюсь загрузить другое окно при нажатии кнопки, но фоновое изображение не будет работать. Окно работает, я могу изменить цвет фона без проблем, но я не могу загрузить изображение. код ниже.

 //load screen on button click
            document.getElementById("startButton").onclick = function() { 
                                                                        load()
                                                                        
                                                                    };


function load() {
    //create the new screen
    newWindow = window.open("", "", "width=1550, height=800");
    newWindow.id = "game";
    newWindow.document.body.style.backgroundColor = "#000000";
    newWindow.document.body.style.backgroundImage = "url(bg.jpg)";
    
}

Файлы и изображения расположены в одной папке, я использую одно и то же изображение, оно работает в первом примере, но не во втором.

Пожалуйста, помогите!!! Заранее спасибо.

Комментарии:

1. Привет @PatrickEvans. Я сделал, я просто изменил его для опубликованного кода. отредактируйте переменную, чтобы она была понятнее. Спасибо

2. Любой URL-адрес, вызываемый из window, относится к домену и текущему URI в адресе. Вы создаете окно с пустым URL. Я думаю, именно поэтому bg.jpg запрос не работает.

3. ОК. как мне это исправить? Я пробовал getElementById(«game»).SetAttributes, но не работает. Точка в правильном направлении будет удалена

4. Вы можете передать изображение base64. Например, «var xyz = ‘данные: изображение / png;base64, base64ImageContent’; NewWindow.document.body.style.background = ‘url(» xyz »)’;»

Ответ №1:

Проверьте эту ссылку и нажмите Выполнить

https://www.w3schools.com/code/tryit.asp?filename=GM9IO9Q6SDNL

попробуйте это.

     <!DOCTYPE html>
    <html>
    <body onload="setBackground()" >

    </body>

    <script>
           function setBackground() {
        document.body.style.backgroundImage = "url(https://www.w3schools.com/html/pic_trulli.jpg)"
        newWindowSetBackgroundload()
    }
    function newWindowSetBackgroundload() {
        //create the new screen
      var newWindow = window.open("", "", "width=1550, height=800");
      //Id use for Uniq thats why its render only one time
    //  newWindow.id = "game";
    //use class for multiple windows genration 
newWindow.class = "game";
        newWindow.document.body.style.backgroundColor = "#000000";
        newWindow.document.body.style.backgroundImage = "url(https://www.w3schools.com/html/pic_trulli.jpg)";
        
    }
    </script>
    </html>