Question

我完全卡住了。我的所有html文档都经过验证并相互正确引用，但是当我加载主html时，它不会呈现。

我的目标是有一个双面的页面：左侧显示默认图像和标题，右侧包含一个按钮，通过不同的html加载左侧的五个不同的随机图像和标题文档。

我与“iframe”不同。

另外如何更改iframe的宽度？

<!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文件。

Answer 1

这里的问题是右边的iframe按钮试图在左边的iframe上调用javascript函数。

每个iframe都在其自己的进程空间中运行，并且无法直接访问。

parent.iframes["LeftIFrameName"].functionName是要走的路...... 在你的情况下，按钮onclick功能<{1}}

Answer 2

您不能只控制另一个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);
}

现在，让我们在点击页面加载和按钮时执行此功能

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

完成。做一些造型就完成了。

Answer 3

要更改iframe的大小，您可以使用css：

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

你可能需要以自己的方式漂浮或安排它们并排放置它们。

看起来你的iframe文档正在调用左框架中定义的函数。如果你有iframes页面实际上存在于不同的空间，并且信息量也有限，你甚至可以反馈到父框架。

你真正想要做的就是刮掉iframe并使用div或类似的东西：

http://jsfiddle.net/GhCAg/

Answer 4

正如我在评论中所说的

<强>左

<!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

我的html没有渲染的原因吗？

4 个答案: