iframe с srcdoc: ссылки на одну и ту же страницу загружают родительскую страницу во фрейм

Question

Ссылки на той же странице работают, ссылаясь на другой элемент с id="sec-id" на той же странице, используя, например,

<a href="#sec-id"></a>

.Ссылка, подобная этой, является относительной.

Однако, если я использую тот же самый синтаксис в iframe на моей площадке LaTeX.js, он не просто прокрутит до элемента назначения, но и (повторно) загрузит всю площадкустраница внутри ifame.(Обратите внимание, что я устанавливаю содержимое iframe программно с помощью iframe.srcdoc = html)

Пример: LaTeX.js детская площадка , в самом конце первого раздела нажмите на ссылку в разделе «См.также раздел 11 ".в iframe справа.

В чем может быть причина?

ОБНОВЛЕНИЕ : теперь я понимаю источник проблемы: браузер использует базовый URL документасделать все относительные URL абсолютными (см. <base>).Проблема начинается с iframe, содержимое которого установлено с srcdoc: не указан уникальный базовый URL, и в этом случае используется базовый URL родительского фрейма / документа - в моем случае игровая площадка (см. Стандарт HTML ).

Таким образом, возникает вопрос: есть ли способ ссылки на iframe srcdoc в базовом URL?или можно сделать так, чтобы браузер не подставлял базу?или создать базовый URL, который не меняет относительные #sec-id URL?

Answer 1

Для записи, кажется, что мой вопрос невозможен, то есть невозможно использовать относительные ссылки на одну и ту же страницу в iframe, содержимое которого установлено с использованием srcdoc.Обходной путь должен быть использован, см. Другой ответ.

Answer 2

Как насчет перехвата события и прокрутки до нужного якоря?

$("a").click(function(e) {
    $('.iframe').animate({
       scrollTop: $(e.target.attr('href')).offset().top
    }, 2000);
    return false;
});

Answer 3

Я не знаю точно, как вы могли бы решить эту проблему, я думаю, это потому, что srcdoc, вы не можете использовать src с типом контента, потому что число символов ограничено, но вы можете преобразовать его вBlob и это вроде работает, хотя стиль потерян.Может быть, вы можете использовать его в качестве отправной точки, основываясь на вашей странице:

// Get the document content
const doc = document.querySelector('iframe').srcdoc;
// Convert it to blob
const blob = new Blob([doc], {type : 'text/html'});
// Load the blob on the src attr
document.querySelector('iframe').src = URL.createObjectURL(blob);
// Remove srcdoc to allow src
document.querySelector('iframe').removeAttribute('srcdoc');