HTML, как изменить элемент вне области видимости во внутреннем HTML
Онлайн-судья моей школы (веб-сайт для решения проблем и тестирования кода) помогает пользователям изменить свою подпись. Он использует приведенный ниже код JavaScript:
signature = "Student Signature"; // Random Signature
elem = document.createElement("div");
elem.innerHTML = signature;
Где подпись может быть изменена студентом.
Дело в том, что нам нравится вращать подписи, поэтому мы написали <i class = "loading icon"> Signature в подписи, чтобы она вращалась и даже перекрывала другой контент (ради интереса). Однако учитель узнал об этом и решил изменить стиль родительского разделения на <div style = "overflow: hidden">, чтобы оно не пересекалось. Вот пример HTML-кода, созданного после изменения:
<div style = "position:relative;overflow:hidden"> Signature </div>
Вопрос: Есть ли способ изменить подпись так, чтобы она могла удалить стиль разделения за пределами области действия, или альтернативы, чтобы значок переполнялся?
P.S. должно быть не более 80 символов. (извините, неправильно посчитал символы)
Моя попытка: я пытался написать свою подпись как </div><div><i class = "loading icon"> my_signature (сайт автоматически добавит </i></div> в конце), но это не сработало. Это произошло потому, что (я думаю) веб-сайт ожидал, что я вложу материал в рамки, а не закончу его.
Не по теме: просто ради интереса, что такое "онлайн-судья"?
созданный элемент никуда не прикрепляется в dom; скрытое переполнение нигде не помешает тому, что вы описали и должны были сделать; код, который вы пытались внедрить во внутренний HTML, в любом случае не является допустимым html, и неясно, как он должен «взломать» контейнер; говорить о компиляторе не имеет смысла; короче этот вопрос - лажа
Сколько «кода» может добавить студент? Они просто добавляют куда-нибудь строку Student Signature? Или предоставленный вами фрагмент — это то, что редактирует пользователь? elem.innerHTML = означает, что страница/сайт открыта для всевозможных атак/взломов.
@DiegoD Я предполагаю, что у пользователя есть поле ввода для ввода Student Signature, тогда частичный код, предоставленный OP, находится на странице вместе с другим кодом/html на этой странице. У ОП есть доступ только к изменению значения подписи, а не кода (ну, пока не так, как они это видят...). Как предположение.
@fdomn-m да, это имеет смысл, поскольку вы описали сценарий ... Я играл усердно
</div><div> не будет работать, поскольку вы не меняете источник HTML - только HTML внутри созданного div, который преобразуется в узлы DOM, а не внедряется как HTML.
Что такое CSS для loading и icon? Где проверяется ограничение в 40 символов?
один трюк может заключаться в использовании position:absolute, пока эта строка не будет очищена, как "<div style='position:absolute;'>Student Signature</div>" .. но она будет расположена относительно ближайшего контейнера, имеющего position: relative
Обратите внимание, что ваша попытка в последнем абзаце вашего вопроса содержит 48 символов. Так что же означает ограничение в 40 символов?
Почему нет ответа на эти комментарии?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете выйти из обычного процесса рендеринга с помощью position:fixed. Тогда элемент подписи будет расположен относительно области просмотра и не будет обрезан.
Посмотрите, как это работает здесь:
let elem, signature;
signature = "<i style='position:fixed' class='loading icon'>Student Signature";
elem = document.createElement("div");
elem.innerHTML = signature;
document.querySelector("div").appendChild(elem);#signature { width: 200px; height: 20px; border: 1px solid; }
.loading { animation: spinner 1.5s linear infinite; }
@keyframes spinner { to { transform: rotate(360deg); } }Some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
<p>
Your signature:
<div id = "signature" style = "position: relative; overflow: hidden;"></div>Отказ от ответственности: я не понял ограничение в 40 символов, и когда я спросил, это не было разъяснено.
Не работает... Посмотрите сгенерированный фрагмент кода: note.ms/voak, вы увидите, что аргумент «переполнение: скрытый» в родительском разделе делает текст полностью пустым и не отображается.
Извините, но вы только что обновили свой вопрос, показав, что упаковка div имеет стиль position: relative. Это важная информация, которая не была упомянута в вашем исходном вопросе. Немного грубовато потом просто вернуться со словами: «Не работает». Однако я посмотрю на ваш измененный вопрос.
Я обновил свой ответ, увидев ваш обновленный вопрос.
Извините, что не показал всю информацию, но добавление z-order:-1 все равно не приводит к появлению текста...
Все еще смотрите note.ms/voak
Можете ли вы показать окружающий HTML-код, чтобы проблему можно было воспроизвести?
Давайте продолжим обсуждение в чате.
Java — это не то же самое, что javascript. Также непонятно, чего вы хотите добиться.