是否有我的HTML不呈現的原因？

我完全被卡住了。我所有的html文檔都經過了驗證，並且被正確引用，但是當我加載主html時，它不會呈現。是否有我的HTML不呈現的原因？

我的目標是有一個兩面的頁面：左側顯示默認圖像和標題，右側包括一個按鈕，用於加載五個不同的隨機圖像和左側的標題通過不同的HTML文件。

我與「iframes」有不同的方面。

另外如何改變iframes的寬度？

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Free Jokes!</title> 
     <meta charset="utf-8"> 
     <meta name="author" content="Justin Partovi, CS80 1184, Summer 2013"> 
     <link href="final%20project.css" rel="stylesheet"> 
    </head> 

    <body> 
     <h1 id="shadow">Welcome to Free Jokes!</h1> 
     <iframe id="left" src="left.html"></iframe> 
     <iframe id="right" src="right.html"></iframe> 
    </body> 
</html>

左側：

（請讓我知道，如果有更好的方式來完成我的目標除了我現在正在做的方式）

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Your Joke!</title> 
     <meta charset="utf-8"> 
     <script> 
     var randomnumber 

     function clickForJoke() { 
     randomnumber=math.floor(1 + Math.random() * 15); 

     switch (randomnumber) { 
     case 1: 
      window.open("joke1.html", target="right"); 
      break; 
     case 2: 
      window.open("joke2.html", target="right"); 
      break; 
     case 3: 
      window.open("joke3.html", target="right"); 
      break; 
     case 4: 
      window.open("joke4.html", target="right"); 
      break; 
     case 5: 
      window.open("joke5.html", target="right"); 
      break; 

     default: 
      window.open("joke.html", target="right"); 
    </script> 
</head> 
</html>

右側：

（我做出的正確按鈕？）

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Final project</title> 
     <meta charset="utf-8"> 
     <link href="final%20project.css" rel="stylesheet"> 
    </head> 

    <body> 
     <button type="button" id="jokeButton" name="jokeButton" onclick="clickForJoke">Click for your joking pleasure!</button> 
    </body> 
</html>

的默認圖像和陽離子：

<html> 
    <head> 
     <title>Default joke</title> 
     <meta charset="utf-8"> 
     <link href="final%20project.css" rel="stylesheet"> 
    </head> 

    <body> 
     <p><img alt src = "laughing%20gif.gif"></p> 
     <p><b>Click the button to the right to get a free joke!</b></p> 
    </body> 
</html>

我沒有做其他五個HTML文檔呢。

來源

2013-07-26 user2617514

這裏有多種問題，第一個是您要訪問的是其他'iframe'功能這是不允許的，第二個函數語法是錯誤的 - 你缺少'}}'末尾 –

你想在左側面板中打開joke.html –

是的。這是我的意圖。我該怎麼辦？ – user2617514

這裏的問題是右邊的按鈕iframe試圖調用左側iframe的javascript函數。

每個iframe都在它自己的進程空間中運行，並且無法直接訪問。

parent.iframes["LeftIFrameName"].functionName是要走的路... 而你的情況是parent.iframes["left"].clickForJoke()該按鈕的onclick功能

來源

2013-07-26 02:44:50 Prash

我將'clickForJoke'改爲'parent.iframes [「left」]。clickForJoke（）'，但它仍然沒有響應。還有什麼我可以做的嗎？ – user2617514

Arun指出了一些語法錯誤。你修好了嗎？你可以看到你在錯誤控制檯上看到了什麼javascript錯誤嗎？ – Prash

我確實修復了它們，但它仍然沒有響應。 – user2617514

你不能僅僅控制從另一個IFRAME不同iframe中。您必須從父級調用它。

<button type="button" id="jokeButton" name="jokeButton" onclick="parent.iframes['left'].clickForJoke();">Click for your joking pleasure!</button>

建議：

你正在做的，現在不需要你使用兩個iframe的目的。它可以在相同的利用AJAX。這裏有一個例子：

首先，讓我們添加一個數組

var pages = array("joke1.html", "joke2.html", ....);

讓我們創建一個容器，顯示了這個頁面，並添加右側的按鈕

<div id="pageLoadArea"></div> 
<div id="buttonArea"> 
    <a href="#" id="loadPage">Load Page</a> 
</div>

現在的頁數，讓我們創建一個函數，在div上加載一個隨機頁面pageLoadArea

function loadPage() { 
    page = pages[Math.floor(Math.random()*pages.length)]; 
    $("#pageLoadArea").load(page); 
}

Now ，當頁面加載和按鈕被點擊時，執行該功能

$(function() { 
    loadPage(); 
    $("#loadPage").on('click', loadPage); 
});

它完成。只要做一些造型，就完成了。

來源

2013-07-26 02:48:51 Starx

是的，那太棒了！ – user2617514

@ user2617514，完成。看到我更新的答案。 :) – Starx

要更改您可以使用CSS的I幀的大小：

<iframe id="left" src="left.html" style="width:50%"></iframe> 
<iframe id="right" src="right.html" style="width: 50%"></iframe>

你可能需要以自己的方式浮動或安排他們並排讓他們一邊。

它看起來像你的權利，iframe的文件正在調用你的左邊框架中定義的功能。如果您的iframe頁面實際存在於不同的空間中，並且信息量有限，您甚至可以向父框架反饋。

你實際上可能想要做的是刮iframe也只是使用的div或者是這樣的：

http://jsfiddle.net/GhCAg/

來源

2013-07-26 02:49:47 jerrylow

正如我在評論

左

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Your Joke!</title> 
     <meta charset="utf-8"> 
    </head>

說

右

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Final project</title> 
     <meta charset="utf-8"> 
     <link href="final%20project.css" rel="stylesheet"> 
    </head> 

    <body> 
     <button type="button" id="jokeButton" name="jokeButton" onclick="clickForJoke()">Click for your joking pleasure!</button> 
     <script> 
      var randomnumber 

      function clickForJoke() { 
       randomnumber=Math.floor(1 + Math.random() * 15); 

       switch (randomnumber) { 
        case 1: 
         window.open("joke1.html", target="left"); 
         break; 
        case 2: 
         window.open("joke2.html", target="left"); 
         break; 
        case 3: 
         window.open("joke3.html", target="left"); 
         break; 
        case 4: 
         window.open("joke4.html", target="left"); 
         break; 
        case 5: 
         window.open("joke5.html", target="left"); 
         break; 

        default: 
         window.open("joke.html", target="left"); 
       } 
      } 
     </script> 
    </body> 
</html>

演示：Plunker

來源

2013-07-26 02:52:51

是否有我的HTML不呈現的原因？

回答

相關問題