在网页开发中，我们经常需要监听浏览器窗口大小的变化，以便动态调整页面元素的布局或尺寸。`resize`事件就是用于捕获这一行为的关键JavaScript事件。然而，当涉及到框架（frame）或者iframe时，直接在主页面中使用`resize`事件可能无法正确地响应框架内的元素。针对这种情况，我们可以采取以下两种方法来解决问题。
方法一：
在框架标签上添加`onLoad`和`onResize`属性，并指定相应的方法。`onLoad`确保在框架内容加载完成后执行，而`onResize`则会在窗口大小改变时触发。这样，你可以为每个框架定义一个处理函数来调整内部元素的尺寸。例如：
```html
<frame name="myFrame" src="your_frame_url.html" onLoad="frameResize()" onResize="frameResize()">
```
然后在对应的`your_frame_url.html`文件中定义`frameResize`函数：
```javascript
function frameResize() {
var surH = window.innerHeight;
// 调整框架内元素的高度
document.getElementById('pic_conent').style.height = surH + 'px';
}
```
这种方法的优点是直接在框架内部处理，避免了跨域问题，但需要在每个框架内都添加相应的事件处理。
方法二：
另一种解决方式是在父页面中监听`resize`事件，然后通过JavaScript通信（如`postMessage`）将尺寸变化通知到框架。这种方式适用于父子页面同源的情况。例如：
```javascript
window.onresize = function() {
var surH = window.innerHeight;
// 将高度信息传递给框架
window.frames['myFrame'].postMessage({ height: surH }, '*');
};
```
在框架页面中，你需要注册一个事件监听器来接收来自父页面的消息：
```javascript
window.addEventListener('message', function(event) {
if (event.origin !== 'your_frame_url_domain') return; // 验证来源，防止跨站脚本攻击
var data = event.data;
if ('height' in data) {
document.getElementById('pic_conent').style.height = data.height + 'px';
}
}, false);
```
这种方法更灵活，可以同时处理多个框架，但需要考虑跨域的安全性。
总结起来，当`resize`事件在框架中不起作用时，可以通过在框架标签上直接添加事件处理，或在父页面中监听`resize`并使用`postMessage`通信来解决。这两种方法各有优缺点，应根据实际需求和安全考虑选择合适的方式。记得在调整元素尺寸时，考虑到不同浏览器的兼容性和性能影响，以提供良好的用户体验。
