ограничить поле действия html [закрыт]

165

05 ноября 2018, 02:00

имеется html который я вставляю в document динамически, к нему же имеется css. вставлять тоже легко просто с помощью

var style = document.createElement('style');

проблема что может быть так что вставленный в определенный div html вылезит из за границ куда вставлен html из за css стилей. Можно ли как то создать искуственную границу будто этот div браузер.

Answer 1

когда дочерний элемент шире/выше родителя

достаточно родителю установить значение overflow = 'scroll'

MDN CSS/overflow
когда дочерний элемент имеет фиксированное положение

необходимо использовать iframes

javascript.ru iframes

пример

серая рамка - родитель
синяя рамка - шире/выше родителя
красная рамка - имеет фиксированное положение

let html = (template, ...substitutions) => String.raw(template, ...substitutions); 
// --> Begin 
var main; 
(function (main) { 
    function guidGenerator() { 
        var S4 = function () { 
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); 
        }; 
        // return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); 
        return 'q' + S4() + S4(); 
    } 
    main.guidGenerator = guidGenerator; 
})(main || (main = {})); 
(function (main) { 
    function fixOverflow(el) { 
        el.style.overflow = 'scroll'; 
    } 
    main.fixOverflow = fixOverflow; 
    function allowOverflow(el) { 
        el.style.overflow = ''; 
    } 
    main.allowOverflow = allowOverflow; 
    function addButtons(el) { 
        el.insertAdjacentHTML('beforeend', html ` 
            <input type="button" class="foos" data-id="fix" value="fixOverflow"> 
            <input type="button" class="foos" data-id="allow" value="allowOverflow"> 
        `); 
        let foos = { 
            fix(e) { 
                fixOverflow(el); 
            }, 
            allow(e) { 
                allowOverflow(el); 
            }, 
        }; 
        let arrOfFoos = Array.from(el.getElementsByClassName('foos')); 
        arrOfFoos.forEach((el) => { 
            el.onclick = foos[el.dataset.id]; 
        }); 
    } 
    main.addButtons = addButtons; 
})(main || (main = {})); 
// -- 
(function (main) { 
    function addConteiner(el, name = main.guidGenerator()) { 
        el.insertAdjacentHTML('beforeend', html ` 
            <style> 
                #${name} { 
                    padding:0; 
                    margin:20px; 
                    width:400px; 
                    height:152px; 
                    border: solid 2px grey; 
                } 
            </style> 
            <div id="${name}">${name}</div> 
        `); 
        return document.getElementById(name); 
    } 
    main.addConteiner = addConteiner; 
})(main || (main = {})); 
// -- 
(function (main) { 
    function addBadElement(el, name = main.guidGenerator()) { 
        el.insertAdjacentHTML('beforeend', html ` 
            <style> 
                .${name} { 
                    width: 2845px; 
                    height:745px; 
                    border: solid 2px blue; 
                } 
            </style> 
            <div class="${name}">${name}</div> 
        `); 
    } 
    main.addBadElement = addBadElement; 
})(main || (main = {})); 
// -- 
(function (main) { 
    function addBad2Element(el, name = main.guidGenerator()) { 
        el.insertAdjacentHTML('beforeend', html ` 
            <style> 
                .${name} { 
                    width: 100px; 
                    height: 100px; 
                    border: solid 2px red; 
                    position: fixed; 
                    top: 10px; 
                    left: 450px; 
                } 
            </style> 
            <div class="${name}">${name}</div> 
        `); 
    } 
    main.addBad2Element = addBad2Element; 
})(main || (main = {})); 
// -- 
(function (main) { 
    // -- 
    window.addEventListener('load', load.bind(main)); 
    // --- 
    function load() { 
        console.log('load'); 
        let conteiner = main.addConteiner(document.body); 
        main.addButtons(conteiner); 
        main.addBadElement(conteiner); 
        main.addBad2Element(conteiner); 
    } 
})(main || (main = {})); 
// <-- End