About the iframe anchor, the anchor is offset up and down, and the anchor has page display problems Srcdoc problem of iframe

Recent development projects , Need to develop iframe page , And get a navigation bar outside , After clicking iframe To jump to the corresponding anchor position .

Encountered some pits , I hope it can help you after sharing .

1. The back end is a direct one html file , So I didn't create it with iframe Of src To accept , It's about using srcdoc Show directly . You can search for iframe.src Is the corresponding url. and srcdoc Is the corresponding html file

2. Anchor point , We can't just give iframe Internal direct anchor , because iframe It can't be operated directly . Need to use iframe Of postMessage event . Specific you can baidu specific documents . Method
(1) Add a click event to the outside navigation page ( for instance hanldClick)

hanldClick() {
     // val You clicked iframe The corresponding anchor point id
document.getElementById('iframeId').contentWindow.postMessage(val, '*')
}

(2) stay iframe Inside script in , Add listening Events

window.addEventListener('message', function (e) {
    
       console.log(e.data)
    }, false)

ad locum , Will meet pit :

A pit , The anchor point will drive the page to move up as a whole . Never use margin-top, After you use it, you find it useless . Use padding-top . Other small offsets are handled by ourselves , I don't want to elaborate here

Pit two , If you are in the iframe It reads like this , You will find iframe It has become your whole big html page , And navigation is useless

window.addEventListener('message', function (e) {
    
        const link = document.createElement('a');
        link.href = `#${
      e.data}`;
        document.getElementById('#${e.data}').appendChild(link);
        link.click();
    }, false)

 The correct way to write it is :

The correct way to write it is :

window.addEventListener('message', function (e) {
    
        //  use window, Do not use document, It should be the scope problem , Caused by pollution 
        window.location.hash = `#${
      e.data}`;
    }, false)

If the article helps you , Just like it in the upper right corner of the article or at the end of the article ！(づ￣ 3￣)づ
If you like the articles shared by Pikachu , Just pay attention to bikachu ！(๑′ᴗ‵๑)づ╭～
Given the limited personal experience , All viewpoints and technical research points , If there is any objection , Please reply directly to the discussion ( Do not make offensive remarks )

take , You're welcome !!! Send people roses , Fragrance in hand