Question

拥有以下代码：

$(function() {
  $('#ifrm').load(function() {
    try {               
      window.document.domain = "sub_domain.domain";

      document.getElementById("ifrm");  // 1
      console.log("bla");
      document.getElementById("ifrm").id = "new_ifrm";  // 2
      window.frames[0].location = "http://server_2.sub_domain.domain/.../iframe_2.html";
    } 
    catch (e) {
      console.log("exception!");
      alert("Error: " + e);
    }
  });             
});
...
<body>
        <iframe src="http://server_2.sub_domain.domain/.../iframe_1.html" id="ifrm" style="height: 100px"></iframe>
    </body>

1。）在＃2行中我改变了帧ID，在下一行中，我现在用NEW id将新内容加载到帧中。输出如下：

bla
bla
exception! (TypeError: document.getElementById(...) is null)

问题是为什么＆＃34;加载＆＃34;如果帧ID不是现在＆＃34; ifrm＆＃34;更改id后再次触发事件但是＆＃34; new_ifrm＆＃34;？

2。）如果第1行导致异常（document.getElementById（...）为null）为什么＆＃34; bla＆＃34;输出？不应该立即将执行直接指向＆＃34; catch＆＃34;阻止忽略异常行下面的任何内容（＃1）。

Answer 1

问题是为什么＆＃34;加载＆＃34;如果帧ID不是现在＆＃34; ifrm＆＃34;更改id后再次触发事件但是＆＃34; new_ifrm＆＃34;？

事件处理程序绑定到iframe本身。

该ID仅在您拨打getElementById时使用。

如果第1行导致异常

它没有。

调用返回null值的函数很好。

当您尝试在document.getElementById("ifrm").id = "new_ifrm";值上创建属性时，

null会抛出异常。

Answer 2

为什么＆＃34;加载＆＃34;如果帧ID不是现在＆＃34; ifrm＆＃34;更改id后再次触发事件但是＆＃34; new_ifrm＆＃34;？

我不这么认为。但是当您设置iframe的位置时：它会从新网址加载内容。

如果第1行导致异常（document.getElementById（...）为null）为什么＆＃34; bla＆＃34;输出？不应该立即将执行直接指向＆＃34; catch＆＃34;阻止忽略异常行下面的任何内容（＃1）。

异常不是因为getElementById(…)返回null。这是因为你从那里引用了一个属性。在标记为2的行上抛出异常。（您可以使用来自您的浏览器开发工具的堆栈跟踪来确认这一点。）

var x = document.getElementById('foo');

和x将为null。这很好而且很有用（告诉你没有这样的元素）。

但是

var t = document.getElementById('foo').id;

不是。因为null没有属性。所以会失败。

加载事件和框架位置更改

2 个答案: