SoFunction
Updated on 2025-03-01

Detailed explanation of the highly adaptive (same domain) instance in javascript

Iframe highly adaptive (same domain) in javascript

Today, I solved the problem of high adaptability of iframes, but this is just a page embed under the same domain. The following is the code:

function SetCwinHeight(){

     var iframeid = ("frame");  //frame is the id of the iframe
     if () {
      if (iframeid && !) {
        if ( && ) {

          = ;

        }else if ( && ) {
         
          = ;
         
        }
      }
     } 

When embedding the page of an iframe, you need to wait until it is fully loaded before you can call SetCwinHeight(). Therefore, when modifying the src value in the iframe, you also need to wait until the modified page is fully embedded before you can call SetCwinHeight(), which is effective. So how to place SetCwinHeight()? My solution is to call it directly in the iframe tag, that is, write <iframe onload = "SetCwinHeight();"></iframe>, but this will pollute the html environment, but in js, it is generally only used once = function(){}. If used multiple times, the latter will overwrite the previous one, so this is the solution I can think of so far.

When the embed page is modified, the height of the iframe also needs to be adjusted. When I call SetCwinHeight() in the js file directly = function(){SetCwinHeight();}, you can only adapt to the height by refreshing the entire page. If the src of the iframe is modified, the height of the iframe is still the height of the previous page, and the height of the current page cannot adapt to it. At first, I thought SetCwinHeight() was written incorrectly, but when the entire page is refreshed, the current page can adapt to it again. After encountering this problem, my anxiety problem appears again. I always hurried to find solutions to the problem without analyzing the problem, and then the question is not correct. This is repeated over and over again, not only wasting time, but also made me feel particularly irritable, so the work cannot continue to progress. After this work, I understood my own problems. After resting for a while, I calmed down and sorted out my thoughts, and then analyzed the problems that occurred, how to run the program, what are the steps of running the program after clicking, and then I saw which step was wrong and why the error occurred. For example, the error this time was not because the program was written incorrectly, but because the program was running incorrectly. The entire page can be refreshed and the effect can be achieved, but after modifying src, there is no effect. The step = function(){} is to wait until the page is fully loaded before executing, so it should be a loading problem, so you need to wait until the page is loaded before calling SetCwinHeight(). Through such analysis, the problem was finally solved. After this time, I must get rid of the problem of impatientness. After encountering the problem, I should first analyze the problem and think about the solution. If I can't solve it myself, I will find the corresponding solution. This way, you won't waste time and energy.

Thank you for reading, I hope it can help you. Thank you for your support for this site!