iframe 跨域传参详解：三种方法轻松实现

解决iframe跨域传参的方法有以下几种：\n\n1. 使用URL传参：在iframe的src属性中添加参数，并在iframe内部的页面中通过JavaScript获取URL中的参数。例如：\nhtml\n<iframe src="http://example.com/page.html?param1=value1&param2=value2"></iframe>\n\n在iframe内部的页面中，可以使用以下JavaScript代码获取参数：\njavascript\nvar params = new URLSearchParams(window.location.search);\nvar param1 = params.get('param1');\nvar param2 = params.get('param2');\n\n\n2. 使用postMessage方法：通过postMessage方法可以在父页面和iframe之间进行跨域通信。父页面可以使用postMessage发送消息，iframe页面可以使用window.addEventListener监听消息。例如：\n在父页面中发送消息：\njavascript\nvar iframe = document.getElementById('myIframe');\niframe.contentWindow.postMessage('Hello', 'http://example.com');\n\n在iframe页面中监听消息：\njavascript\nwindow.addEventListener('message', function(event) {\n if (event.origin === 'http://example.com') {\n console.log(event.data);\n }\n});\n\n\n3. 使用cookie：如果父页面和iframe页面都在同一个域名下，可以使用cookie来进行跨域传参。父页面可以设置cookie，iframe页面可以获取cookie。例如：\n在父页面中设置cookie：\njavascript\ndocument.cookie = 'param1=value1';\ndocument.cookie = 'param2=value2';\n\n在iframe页面中获取cookie：\njavascript\nvar cookies = document.cookie.split(';');\nfor (var i = 0; i < cookies.length; i++) {\n var cookie = cookies[i].trim().split('=');\n var name = cookie[0];\n var value = cookie[1];\n if (name === 'param1') {\n console.log(value);\n }\n if (name === 'param2') {\n console.log(value);\n }\n}\n\n\n需要注意的是，以上方法都需要在父页面和iframe页面中进行相应的操作，并且需要在服务器端进行相应的配置以允许跨域访问。