Document designmode on не работает

Уважаемые коллеги, никто не сталкивался с такой проблемой?
В одном документе расположены два iframe. Для них обоих нужно включить designMode. Если реализовать это прямой версткой html, то все работает. Вот пример:
test1.html

Если же попробовать сгенерить iframe JavaScript-ом, то designMode сбрасывается на off, причем ведет себя все это по разному в разных версиях FF:
test2.html

В FF, сборка Mozilla/5.0 (Windows; U; Windows NT 5.1; ru-RU; rv:1.7.10) Gecko/20050717 Firefox/1.0.6, нижний фрейм, несмотря на то, что у него сбрасывается designMode в off, остается доступным к редактированию, а в сборке Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8) Gecko/20051107 Firefox/1.5 уже оба фрейма недоступны.

№2 07-12-2005 12:30:08

Re: Проблемы с iframe и designMode

А если после appendChild немного подождать? Например:
setTimeout(«document.getElementById(frame2.id).contentDocument.designMode = ‘On'», 100);
Второй параметр можно сделать и побольше.

Отредактировано Athathoth (07-12-2005 12:32:12)

. она старалась, чтобы я больше времени проводил в разных пионерлагерях и группах продлённого дня — кстати сказать, удивительную красоту последнего словосочетания я вижу только сейчас. (c) Виктор Пелевин

№3 07-12-2005 12:50:33

Re: Проблемы с iframe и designMode

Например:
setTimeout(«document.getElementById(frame2.id).contentDocument.designMode = ‘On'», 100);
Второй параметр можно сделать и побольше.

Что-то не помогло, причем опять как-то хитро работает, теперь первый alert выдает off, второй on и опять сбрасывает оба значения в off!
И таймаут ставил здоровый — все равно не пашет

№4 07-12-2005 14:06:20

Re: Проблемы с iframe и designMode

MadGraph

Ну дык алерты до designMode = ‘On’ срабатывают в этом случае.

Отредактировано Athathoth (07-12-2005 14:07:58)

Источник

Document designmode on не работает

№2 07-12-2005 12:30:08

Re: Проблемы с iframe и designMode

Отредактировано Athathoth (07-12-2005 12:32:12)

№3 07-12-2005 12:50:33

Re: Проблемы с iframe и designMode

Например:
setTimeout(«document.getElementById(frame2.id).contentDocument.designMode = ‘On'», 100);
Второй параметр можно сделать и побольше.

№4 07-12-2005 14:06:20

Re: Проблемы с iframe и designMode

MadGraph

Ну дык алерты до designMode = ‘On’ срабатывают в этом случае.

Отредактировано Athathoth (07-12-2005 14:07:58)

Источник

Как изменить любую веб-страницу в браузере

Веб-страницы — это просто документы, которые отображает Ваш веб-браузер. Но что, если Вы могли бы изменить любую веб-страницу прямо в браузере? Вы можете, и Вам не нужно расширение для браузера — это функция, встроенная в каждый современный браузер.

Эта функция использует опцию «document.designMode», которую Вы можете включить через консоль JavaScript Вашего веб-браузера.

Вы можете использовать эту функцию, чтобы очистить веб-страницу перед ее печатью, проверить, как будут выглядеть изменения на веб-странице, или даже просто разыграть людей. Это все равно, что редактировать документ Word — не нужно возиться с HTML.

Чтобы активировать эту функцию, посетите веб-страницу и откройте консоль разработчика. Чтобы открыть консоль в Google Chrome, нажмите Меню > Дополнительные инструменты > Инструменты разработчика или нажмите Ctrl + Shift + i.

Хотя в качестве примера мы используем Chrome, эта функция работает и в других современных браузерах . Вот как открыть консоль в других браузерах:

В Mozilla Firefox нажмите Меню > Веб-разработчик > Веб-консоль или нажмите Ctrl + Shift + K.
В Apple Safari нажмите «Safari» > «Установки» > «Дополнительно» и включите «Показать меню «Разработка» в строке меню». Затем нажмите «Разработка» > «Показать консоль JavaScript».
В Microsoft Edge нажмите Меню > Дополнительные инструменты > Инструменты разработчика или нажмите F12, а затем перейдите на вкладку «Консоль».

Нажмите вкладку «Console» в верхней части панели инструментов разработчика. Введите в консоли следующее и нажмите Enter:

Источник

Как изменить любую веб-страницу в браузере

В еб-страницы — это просто документы, которые отображает Ваш веб-браузер. Но что, если Вы могли бы изменить любую веб-страницу прямо в браузере? Вы можете, и Вам не нужно расширение для браузера — это функция, встроенная в каждый современный браузер.

Хотя в качестве примера мы используем Chrome, эта функция работает и в других современных браузерах. Вот как открыть консоль в других браузерах:

В Mozilla Firefox нажмите Меню > Веб-разработчик > Веб-консоль или нажмите Ctrl + Shift + K.
В Apple Safari нажмите «Safari» > «Установки» > «Дополнительно» и включите «Показать меню «Разработка» в строке меню». Затем нажмите «Разработка» > «Показать консоль JavaScript».
В Microsoft Edge нажмите Меню > Дополнительные инструменты > Инструменты разработчика или нажмите F12, а затем перейдите на вкладку «Консоль».

Теперь Вы можете закрыть консоль, если хотите, и отредактировать текущую веб-страницу, как если бы это был редактируемый документ. Нажмите где-нибудь, чтобы вставить курсор и набрать текст. Используйте клавиши Backspace или Delete для удаления текста, изображений и других элементов.

Это просто меняет внешний вид веб-страницы в Вашем браузере. Как только Вы обновите страницу, Вы снова увидите оригинал. Если Вы перейдете на другую веб-страницу или вкладку, она не будет в режиме разработки, пока Вы не откроете консоль и еще раз не наберете эту строку.

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

Веб-страница больше не будет редактироваться, но Ваши изменения будут сохранены до следующего обновления страницы.

Источник

Как быстро редактировать текст на странице с помощью консоли разработчика Chrome

При работе с контентом на сайте часто требуется вносить изменения или править различные текстовые блоки прямо на странице. В большинстве случаев это можно сделать через выделение элемента и правку в коде.

Однако существует специальная команда document.designMode = ‘on’ которая позволяет окно браузера с содержимым страницы с легкостью превратить в текстовый редактор.

That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN

Для вызова команды вам потребуется произвести несколько несложных действий:

Откройте на нужной странице консоль администратора (вызывается нажатием клавиши F12 или Ctrl+Shift+I);
В появившемся окне выберите вкладку консоль;
Укажите команду document.designMode = ‘on’ ;
Далее нажмите Enter и приступайте к изменению контента на странице — установите курсор в нужном фрагменте текста и вносите любые правки.

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

Для чего будет полезна команда:

изменять тексты и подменять данные на сайте;
тестировать различные текстовые блоки и элементы — заголовки, лид-параграфы, абзацы, врезки, сноски;
проверять различные форматы написания текста и быстро принимать решения;
быстро править тексты и отправлять скриншоты заинтересованным участникам — разработчикам, копирайтерам или дизайнерам;
создавать фейковые скриншоты с содержимым страницы.

Если вам интересно узнать больше о возможностях консоли администратора Chrome, то рекомендую посмотреть запись Chrome Dev Summit 2016.

Хотите еще больше похожих выступлений? Посетите официальную страницу саммита. Здесь вы найдете ссылки на записи других выступлений за все предыдущие года.

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

Источник