Introduction: I think everyone should have seen some websites such as some of the subframes in msdn.microsoft.com After pressing a button on the page, a frame in the page is hidden. In fact, this effect is very realistic. Simple, now let's take a look at how to use JavaScript to access and modify the Frame object. 1. I will talk about Frame's structure and grammar before starting: // The following is the code of frame with the frame page.
Untitled Document </ Title> <meta http-equiv = "content-type" content = "text / html; charSet = GB2312> </ head> <frameset rows =" 117,498 "> // Diagram representing the framing structure of the yellow box for the upper and lower points [ROWS indicates the upper and lower COLS representations], 498 is 498, including top.htm and the red box containing left.htm and main.htm. These two It belongs to the same level object <frame src = "top.htm"> <frameset id = frame_bottom cols = "200, *"> // This means that the divided frame structure in the red box is left and right, and the right is except for the left. The frame occupies 200 after all space, here I gave this frameset one id: frame_bottom This is to facilitate access to this object after javascript to access this object <frame src = "left.htm> <frame src =" main.htm "> </ frameset> </ frameset> <noframes> // This is used to display the page content displayed when the browser does not support Frame <body bgcolor = "# ffffff" text = "# 000000> Your browser is not Support Frame </ body> </ noframes> </ html> 2. Dynamically modified Frameset's content After reading the code, you should know that the structural code of the Frame_bottom This frameset object is cols = "200, *" below is dynamically modified Code</p>
<p><input type = "button" name = "button" value = "This button will turn off the left frame" onclick = resetframes ()> <script language = "javascript"> Function ResetFrames () {Top.Frame_bottom.cols = Top.frame_bottom.cols == "0, *")? "200, *": "0, *"; // TOP represents the highest level object of all Frame objects is the code, TOP. Frame_bottom acquires this object, then modify the cols attribute of the top.frame_bottom object as a new value. To achieve hidden frames} </ script></p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-31559.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="31559" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.057</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'SrIKF4a0X507bJqKBiovauF33h4BVX2NL58PVSxt_2FOhS4N6iDchIxnwYq4EtgQhdPmccrW_2BwoUFveTFA_2BvePMQ_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
