javascript - 我的 html 未呈现有什么原因吗?

标签 javascript html

我完全被困住了。我的所有 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>

默认图像和阳 ionic :

<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 文档。

最佳答案

此处的问题是右侧 iframe 上的按钮尝试调用左侧 iframe 上的 JavaScript 函数。

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

parent.iframes["LeftIFrameName"].functionName 是要走的路...... 在您的情况下,按钮 onclick 函数的 parent.iframes["left"].clickForJoke()

关于javascript - 我的 html 未呈现有什么原因吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17871973/

相关文章:

javascript - 如何在 Angular 5 中使用 ngx-toastr 更改每个用例的特定 toast 的位置

javascript - 上下文映射函数中的 jsx-no-bind

javascript - 在 Canvas 上绘制多个矩形

c# - 从服务器或客户端检查或更改键盘输入语言

html - 当所有子项都有 flex 属性时,父项的 justify-content 是否重要?

javascript - jQuery 如何使用外部源的 DOM 对象

JavaScript 用于提示输入和输出按字母顺序排序

php - 如何查找 session 变量是否在逗号分隔的列中?

html - 基本 CSS/HTML 在一列中将一个 DIV 堆叠在另一个之下

HTML 页脚内容非居中