SoFunction
Updated on 2025-03-01

iframe implements highly adaptive applet web-view solution

Preface

Recently, in project development, I encountered a scenario: the page display of H5 is displayed on the server. Therefore, the iframe is considered to introduce the corresponding page display. The height of the iframe can be set normally in the browser and can be displayed normally, but the web-view display of the mini program does not take effect.

About contentWindow, contentDocument

Definition and usage

When nesting a page with an iframe, if the parent page wants to get the content in the child page, you can use contentWindow or contentDocument, the difference is as follows:

contentWindow: It is used to obtain the window object of the iframe, read-only attribute, compatible with major browsers, and the usage is as follows:

("iframeId").contentWindow

Such a simple sentence can get the window object with the iframe containing the page;

contentDocument: It is used to obtain document objects of child windows. Mainstream browsers support and ie8+ support. The usage is as follows

("iframeId").contentDocument

Such a simple sentence can get the document object of the iframe containing the page;

The above two methods are to get the child window in the parent window. Since we can all get the child window window object and document object, then other operations in the child window are easy!

The contentDocument property can return documents in an iframe as an HTML object, and can handle the returned objects through all standard DOM methods.

Syntax:, or (not a jquery object)

Compatible to get document object:

var getIFrameDoc = function(){ 
    var iobj = ("iframe"); 
    ("body")[0].appendChild(iobj); 
    return  || ; 
}

Basic use:

1. ("myiframe").contentWindow. After obtaining the iframe object, you can obtain the window object containing the page through the contentWindow, and then you can access the page elements normally;

2. $("#myiframe")[0].contentWindow, jquery selector obtains an iframe, first convert the jquery object to a DOM object, or use the get() method to convert;

3. ("#myiframe")[0].contentWindow.("#dd").val(), you can use the jquery selector to perform page operations after obtaining the window object of the iframe;

4. $("#myiframe")[0].="zhangsan" ; You can pass parameters to the iframe page in this way, and the value can be obtained on the iframe page. Username is a custom global variable;

5. You can get the window of the main page through parent on the iframe page, and then you can access the elements of the father page normally;

6. parent.$("#frame_A")[0].("#frame_B"); When calling between pages of the same level of iframe, you need to first get the father's window, and then call the same level of iframe to get the window for operation;

    //Set the parent iframe in the child iframe, or the grandchild iframe height. function showIframeH(){ 
    var parentWin = ("test"); 
    if(!parentWin) return false; 
    var sub = ("test2"); 
    if(!sub) return false; 
    var thirdHeight = ; //The third layer body object     = thirdHeight; //Set the height of the second layer iframe    var secondHeight = parentWin .; //The second layer body object     parentWin .height = secondHeight; //Set the height of the first layer iframe}
  • 1. When using an iframe page, you can use contentWindow, contentDocument

1. First get the window object in the iframe, and then get the DOM element inside through this object.

example:

var ifr = ("iframe"); ("XXXXX") <iframe src="" id=""></iframe>

Here, the return is the window object of the iframe, so you can then call the document method and then call getElementByTagName. Then you can operate on the elements in the iframe.

  • 2. On this iframe page, you can use it to operate the DOM element of the parent page of this iframe (that is, the page that nests this iframe):

, (The TOP here is the top layer of acquisition, that is, when there are multiple nested iframes)

var ifr = ("iframe"); ("XXXXX") <iframe src="" id=""></iframe>

Solution

Projects written using Vue, native ones can be used directly = function(){}

    <iframe
    ref="iframe"
    frameborder="no"
    scrolling="auto"
    class="iframe-wrap"
    
    :src="context_url"
    :height="loadHeight"
    @="setIframeHeight">
    </iframe>

    setIframeHeight(){
      const ifm= ('iframeWrap');   
      try {
        const bodyDom =  || ;
        const height =  || 
         = height
      } catch (error) {
        (error)
      } 
    },

Note: During local development, if there is a cross-domain problem of src, high adaptability will not work, and will be highly adaptable after packaging and deployment.

The above is the detailed content of the web-view solution for the highly adaptive mini program of iframe. For more information about iframe's highly adaptive web-view, please pay attention to my other related articles!