动态加载js、css等文件跨iframe实现

在Web开发中，跨iframe动态加载JavaScript和CSS文件可以通过几种方式实现。这里，我将提供一个基本的思路和示例代码，帮助你理解如何跨iframe进行这些操作。

### 跨iframe加载JS和CSS

#### 方法一：使用`postMessage` API

`postMessage` API允许你安全地在不同源或相同源的窗口之间发送消息。你可以利用这个API来通知iframe中的页面加载特定的JS或CSS文件。

**父页面（发送消息）**:

// 假设iframe的id是"myIframe"
var iframe = document.getElementById('myIframe');

// 发送消息到iframe，指示它加载一个JS文件
iframe.contentWindow.postMessage({
    action: 'loadScript',
    url: 'https://example.com/path/to/your/script.js'
}, '*'); // '*' 表示接受来自任何源的消息，但出于安全考虑，最好指定具体的源

// 发送消息到iframe，指示它加载一个CSS文件
iframe.contentWindow.postMessage({
    action: 'loadStyle',
    url: 'https://example.com/path/to/your/style.css'
}, '*');

**iframe页面（接收消息并处理）**:

window.addEventListener('message', function(event) {
    // 出于安全考虑，检查消息来源
    if (event.origin !== "http://expected-source.com") { // 替换为你的父页面源
        return;
    }

    var data = event.data;

    if (data.action === 'loadScript') {
        var script = document.createElement('script');
        script.src = data.url;
        document.head.appendChild(script);
    } else if (data.action === 'loadStyle') {
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = data.url;
        document.head.appendChild(link);
    }
});

#### 方法二：使用URL参数或哈希值

如果iframe的URL是由父页面控制的，你可以通过修改iframe的`src`属性来传递参数或哈希值，iframe页面根据这些参数或哈希值来加载相应的JS或CSS文件。

**父页面**:

// 修改iframe的src来传递参数
document.getElementById('myIframe').src = 'https://example.com/iframe-page.html?loadScript=https://example.com/path/to/your/script.js';

// 或者使用哈希值
document.getElementById('myIframe').src = 'https://example.com/iframe-page.html#loadStyle=https://example.com/path/to/your/style.css';

**iframe页面**:

// 监听页面加载完成
window.onload = function() {
    var scriptUrl = new URLSearchParams(window.location.search).get('loadScript');
    if (scriptUrl) {
        var script = document.createElement('script');
        script.src = scriptUrl;
        document.head.appendChild(script);
    }

    var styleUrl = window.location.hash.split('=')[1];
    if (styleUrl) {
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = styleUrl;
        document.head.appendChild(link);
    }
};

注意：使用URL参数或哈希值的方法可能会受到URL长度限制的影响，并且不够灵活，因为每次更改都需要重新加载iframe页面。相比之下，`postMessage` API提供了更灵活和安全的跨文档通信方式。