js跨域问题之跨域iframe自适应大小实现代码

跨域问题是指由于浏览器的同源策略限制，一个域下的脚本无法与另一个域的文档或脚本进行交互。跨域问题通常出现在iframe嵌入内容时，因为如果iframe加载的内容与父页面不属于同一域，则无法直接获取iframe内内容的尺寸信息。这种情况下，要想实现跨域iframe大小的自适应，需要采用一些特殊的策略。 解决方案的思路可以分解为以下步骤： 1. 假设有一个页面a.htm属于域A，它通过iframe嵌入了域B下的页面b.html。由于b.html的尺寸可能会变化，我们需要a.htm中的iframe能够自适应b.html的尺寸。 2. 但是由于跨域限制，域A中的脚本无法直接获取域B中页面b.html的尺寸信息。因此，需要在b.html中引入域A提供的一个JavaScript文件（例如a.js）。 3. 在a.js中，首先通过一些方法（例如使用window.parent，window.frameElement等）获取到b.html的尺寸信息，然后创建一个新的iframe元素，这个新iframe的src指向域A的一个中间代理页面（例如a_proxy.html），并且将获取到的尺寸信息编码在src的hash参数中（例如 "#width|height"）。 4. a_proxy.html是一个位于域A的中间代理页面，它的作用是解析location.hash中包含的尺寸信息，并将尺寸信息应用到父页面a.htm中的原始iframe元素上。这样，通过设置a.htm中原始iframe的宽度和高度，就可以实现跨域iframe自适应大小的效果。 5. 为了避免代理页面被错误使用，a_proxy.html可以做一些安全检查，确保它的源（src）确实是来自预期的页面（也就是a.htm所在的域）。 6. 此外，为了在不同浏览器中都能正常工作，可能需要考虑不同的浏览器对hash的处理可能存在的差异性。 使用上述方法，可以在不违反同源策略的前提下，通过中间代理页面间接获取跨域页面的尺寸信息，并动态调整iframe的尺寸来实现自适应效果。这种方法既保证了安全性，也解决了跨域带来的限制问题。 具体到代码实现，可以按照以下步骤操作： 1. 在a.htm中设置初始高度和宽度都为0的iframe，并引入b.html。 ```html <iframe id="aIframe" height="0" width="0" src="***"></iframe> ``` 2. 在b.html中引入a.js，允许a.js脚本运行在其中。 ```html <script language="javascript" type="text/javascript" src="***"></script> ``` 3. 在a.js中获取b.html的尺寸，并创建一个新iframe指向a_proxy.html，将尺寸信息编码在hash中。 ```javascript var dHeight = document.documentElement.scrollHeight; // 或者其他获取b.html尺寸的方法 var t = document.createElement("div"); t.innerHTML = '<iframe id="iframeProxy" height="0" width="0" src="***' + dHeight + '" style="display:none"></iframe>'; document.documentElement.appendChild(t.firstChild); ``` 4. 在a_proxy.html中解析hash参数，获取尺寸信息，并设置到父页面的iframe上。 ```javascript var pParentFrame = parent.parent.document.getElementById("aIframe"); var locationUrlHash = parent.parent.frames["aIframe"].frames["iframeProxy"].location.hash; var dimensions = locationUrlHash.split("#")[1].split("|"); pParentFrame.style.width = dimensions[0] + "px"; pParentFrame.style.height = dimensions[1] + "px"; ``` 以上步骤和代码片段展示了跨域iframe自适应大小问题的基本解决方法。需要注意的是，这个方法需要域A和域B之间有较好的合作关系，因为需要在b.html中引入域A的脚本。此外，为了确保跨浏览器兼容性，可能还需要对不同浏览器间的实现差异进行适配和测试。