• 《JavaScript基础教程》


    第五章、窗口与框架

    5.2 设置目标

    源代码:

    //主页面:Captain.html

    <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta charset="utf-8" />
      <title>Captain</title>
      <link rel="stylesheet" href="script.css" />
      <script src="scripts/ShowAlert.js"></script>
    </head>
    <body>
      <iframe src="iframe.html" id="icontent" name="icontent"></iframe>
      <h1>Main Content Area</h1>
      <h2>
        <a href="html/page1.html">Link 1</a><br />
        <a href="html/page2.html">Link 2</a><br />
        <a href="html/page3.html">Link 3</a>
      </h2>
    </body>
    </html>

    //css文件:script.css

    body {
      background-color: #FFF;
    }

    iframe#icontent {
      float: right;
      border: 1px solid black;
       350px;
      height: 300px;
      margin-top: 100px;
    }

    //显示在iframe中的初始页面:iframe.html

    <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta charset="utf-8" />
      <title>Content iframe</title>
    </head>
    <body>
      Please load a page
    </body>
    </html>

    //用JS来设置框架:

    window.onload = initLinks;  //window.onload = methodName:表示在页面加载时,调用methodName函数

    function initLinks() {
      for (var i = 0 ; i < document.links.length; i++) {  //获取页面的所有链接
        document.links[i].target = "icontent";  //将a元素的target属性设置为iframe的name属性,就可以将a元素链接的  //内容显示到iframe内。(不过有些浏览器要求用id来设置,所以最好可以将id和name都相同设置。)
      }
    }

  • 相关阅读:
    [USACO08MAR]土地征用Land Acquisition
    树链剖分
    [AHOI2008]紧急集合 / 聚会
    P1852 [国家集训队]跳跳棋
    Ant Trip(欧拉回路+并查集)
    单词游戏
    POJ3694 Network
    C++ STL小总结
    2-Sat专题
    6大名家带你穿越大半个中国去深思
  • 原文地址:https://www.cnblogs.com/quanxi/p/6030337.html
Copyright © 2020-2023  润新知