使用javascript在第二页中打开图像

我在index.html中有一个按钮。单击此按钮后，我想在第2页的正文部分附加一个图像。以下代码仅打开第2页，但其余代码无效。我做错了什么？谢谢

function ready()
{
    var w    = window.open("Page2.html");
    w.onload = function(){
        var p = document.createElement("img");
        x.setAttribute("src", "ts_WWW_2016w03.jpg");
        x.setAttribute("width", "304");
        x.setAttribute("height", "228");
        w.document.body.appendChild(p);
    };
}

---

我已经通过了chrome最新版本的测试。 x不是define:x.setAttribute

function ready()
{
    var w = window.open("Page2.html");
    w.onload = function(){
        var p = document.createElement("img");
        p.setAttribute("src", "images/ts_WWW_2016w03.jpg");
        p.setAttribute("width", "304");
        p.setAttribute("height", "228");
        w.document.body.appendChild(p);
    };
}
ready();

方法1： 一种方法是使用查询字符串，可以如下所示：

page1.html

<h1>Page 1</h1>
<button id="clickMe">Open New Page</button>

<script>
    document.getElementById("clickMe").addEventListener('click', ready);

    function ready() {
        var $s = 'http://lorempixel.com/400/200/city/2/',
        $w = '400px',
        $h = '200px',

        //we combine the three into one string using '&' as a delimiter
        $qs = $s + '&' + $w + '&' + $h;

        //then we add that final string as query to the href
        window.open('page2.html?' + $qs);
    }
</script>

<h1>Page 2</h1>

<script>
    // we first grab page href, extract that string we injected in
    // page1 which comes after the '?' mark.
    // then we split the string into an array with three elements.
    var a = location.href,
        b = a.substring(a.indexOf("?") + 1),
        qStrings = b.split('&'),
        $img = document.createElement("img");

    // because of how we combined the string in page 1, the first
    // element of the array represents the 'src'
    // the secodn elements represents the 'width' and the last
    // on is the 'hight'.
    console.log(qStrings);
    $img.setAttribute("src", qStrings[0]);
    $img.setAttribute("width", qStrings[1]);
    $img.setAttribute("height", qStrings[2]);

    //then we append the image
    document.body.appendChild($img);
</script>

<h1>Page 1</h1>
<button id="clickMe">Open New Page</button>

<script>
  document.getElementById("clickMe").addEventListener('click', ready);

  // we create three session keys for src, width and height
  // and we set their values, then we launch page2
  function ready() {
    sessionStorage.setItem('$src', 'http://lorempixel.com/400/200/city/2/');
    sessionStorage.setItem('$width', '400px');
    sessionStorage.setItem('$height', '200px');

    window.open('page2.html');
  }
</script>

page2.html

<h1>Page 1</h1>
<button id="clickMe">Open New Page</button>

<script>
    document.getElementById("clickMe").addEventListener('click', ready);

    function ready() {
        var $s = 'http://lorempixel.com/400/200/city/2/',
        $w = '400px',
        $h = '200px',

        //we combine the three into one string using '&' as a delimiter
        $qs = $s + '&' + $w + '&' + $h;

        //then we add that final string as query to the href
        window.open('page2.html?' + $qs);
    }
</script>

<h1>Page 2</h1>

<script>
    // we first grab page href, extract that string we injected in
    // page1 which comes after the '?' mark.
    // then we split the string into an array with three elements.
    var a = location.href,
        b = a.substring(a.indexOf("?") + 1),
        qStrings = b.split('&'),
        $img = document.createElement("img");

    // because of how we combined the string in page 1, the first
    // element of the array represents the 'src'
    // the secodn elements represents the 'width' and the last
    // on is the 'hight'.
    console.log(qStrings);
    $img.setAttribute("src", qStrings[0]);
    $img.setAttribute("width", qStrings[1]);
    $img.setAttribute("height", qStrings[2]);

    //then we append the image
    document.body.appendChild($img);
</script>

<h1>Page 1</h1>
<button id="clickMe">Open New Page</button>

<script>
  document.getElementById("clickMe").addEventListener('click', ready);

  // we create three session keys for src, width and height
  // and we set their values, then we launch page2
  function ready() {
    sessionStorage.setItem('$src', 'http://lorempixel.com/400/200/city/2/');
    sessionStorage.setItem('$width', '400px');
    sessionStorage.setItem('$height', '200px');

    window.open('page2.html');
  }
</script>

第3页
//首先，以防用户在单击第1页的按钮之前打开第2页，
//我们检查所需的会话项是否已设置，如果已设置，则继续
if（sessionStorage.getItem（'$src'）&&sessionStorage.getItem（'$width'）&&sessionStorage.getItem（'$height'））{
var$img=document.createElement（“img”）；
//我们获取会话值并将其设置为
//图像属性，然后我们附加图像
$img.setAttribute（“src”，sessionStorage.getItem（“$src”）；
$img.setAttribute（“宽度”，sessionStorage.getItem（“$width”）；
$img.setAttribute（“height”，sessionStorage.getItem（“$height”）；
文件.正文.附件（img）；
//这是可选的，但这可能是一个很好的实践
//删除会话项
sessionStorage.removietem（“$src”）；
sessionStorage.removietem（“$width”）；
sessionStorage.removietem（“$height”）；
}

我认为，一旦打开第二页，您的注意力就会转移到它，这就是为什么您的其余代码无法工作的原因。也许您应该将查询字符串中的参数发送到第二页，并使用javascript使用这些参数打开图像。

窗口。完全打开

结果重新加载页面，以便

w.onload

从不调用。向我解释您对这个答案的推理是什么？谢谢。我试过你的第二种方法，效果很好。我花了一个星期的时间在想这个问题。有没有办法不打开一个新的页面，而是用第2页替换第1页？