改变& lt; frameset>使用JavaScript滚动

Change <frameset> scrolling with JavaScript

本文关键字：JavaScript 滚动 使用 frameset lt 改变      更新时间：2023-09-26

我们在应用程序中使用帧。在一帧中，滚动设置为"auto"。我试图根据一个小条件改变frame属性。下面是HTML和JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <meta http-equiv="x-ua-compatible" content="IE=5">
    </head>
    <frameset>
        <frame src="#" name="contentFR" id="contentFR" scrolling="Auto" noresize marginwidth="0" marginheight="0">
    </frameset>
    <script language="javascript">
        var iFrm = document.getElementById("contentFR");
        iFrm.setAttribute('scrolling', 'no');
    </script>
</html>

我用的是ie11，但是我的应用程序只能在ie5兼容模式下运行

更新方法:只需克隆节点。

// Proceed when the document has loaded
var timer = setInterval(function () {
    // The document has loaded
    if ( document.readyState === "complete" ) {
        // Stop checking document load-state
        clearInterval( timer );
        // Get our frame, and create a clone of it
        var frame = document.getElementById("contentFR");
        var clone = frame.cloneNode(true);
        // Update the scrolling on the clone
        clone.setAttribute("scrolling", "no");
        // Replace original frame with clone frame
        frame.parentElement.replaceChild(clone, frame);
    }
}, 10);

关于选择这条路由的原因，请参见下文。

我很困惑，改变属性，和/或属性，不工作。当然，我只能在Windows 10的ie 11上检查，所以我不知道同样的问题是否会在早期版本的ie中重现。既然你说你的用户将使用ie11，我们可以放心地假设，如果我们遇到这个问题，他们也会遇到。

我还发现将<script>置于框架集之下也不起作用，所以我不得不将其放在<head>中(脚本只能放置在<body>或<head>中，并且由于本文档中没有<body>，我们只能将它们放置在<head>中)。因为头部是先被解析/创建的，所以我们的frame元素不会及时存在，无法从头部更改它。此外，由于我们正在使用IE 5文档模式，我们不能仅仅在document上监听DOMContentLoaded事件。相反，我选择每隔10ms检查一次document.readyState值，直到它注册为完整的。

最后，正如您所发现的，简单地更新属性似乎不起作用。设置属性似乎也不起作用。奇怪的是，如果您在执行操作后检查元素，这两种方法实际上都将值从Auto更改为No，但是更改没有反映在文档中。出于这个原因，我决定创建一个全新的框架，取代另一个。

这段代码让人感觉真的，真的被误导了。希望有人能来分享一种方法，这种方法不需要从根本上复制一个元素，并将一个元素的属性应用于另一个元素。在此之前，这个解决方案似乎是有效的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <meta http-equiv="x-ua-compatible" content="IE=5">
        <script type="text/javascript">
            // Proceed when the document has loaded
            var timer = setInterval(function () {
                if ( document.readyState === "complete" ) {
                    // Stop checking document load-state
                    clearInterval( timer );
                    // Get our frame, and create a replacement
                    var frame = document.getElementById("contentFR");
                    var newFrame = document.createElement( "frame" );
                    // Copy all attributes over
                    var i = 0, attr;
                    for ( ; i < frame.attributes.length; i++ ) {
                        attr = frame.attributes[i];
                        // If we found a scrolling attribute, set it to 'no'
                        if ( attr.name === "scrolling" ) attr.value = "no";
                        // Apply old attribute to new frame
                        newFrame.setAttribute( attr.name, attr.value );
                    }
                    // Replace old frame with new frame
                    frame.parentElement.replaceChild( newFrame, frame );
                    // Null-out our variables
                    frame = i = attr = timer = null;
                }
            }, 10);
        </script>
    </head>
    <frameset cols="50%, *">
        <frame src="side.html">
        <frame src="page.html" id="contentFR" scrolling="Auto" noresize marginWidth="0" marginHeight="0">
    </frameset>
</html>
相关文章：