javascript - 在第二次加载时更改 iframe 样式，在 Internet Explorer 9 中不起作用

Question

我试图在第二次加载时更改 iframe 的样式。我试过这个:

$(function() {
    var loadCnt = 0;

    $('#iframem').load(function() {
        if (loadCnt >0) {
            $("#idiv").width(453).height(349);
            $("#iframem").css("left", "-656px");
            $("#iframem").css("top", "-250px");
        }
        ++loadCnt;
    });
});

HTML:

<div style="overflow: hidden; width: 377px; height: 230px; position: relative;" id="idiv">
<iframe  id="iframem" src="http://www.example.org" style="border: 0pt none ; left: -1px; top: -8px; position: absolute; width: 1680px; height: 867px;" scrolling="no"></iframe></div>

它工作得很好，但它不能在 Internet Explorer 9 上工作。正确的方法是什么？

Answer 1

我认为您的方法存在逻辑问题，我完全不确定您是如何使用它的。由于 JavaScript 仅在页面加载后运行，这意味着在您的代码中您实际上永远不会获得大于 1 的 loadCnt - 因为每次加载页面时它都会再次将其设置为 0。

为了实现您所描述的内容，您需要采取不同的方法，并且有几种方法可以实现:

1. 使用服务器端语言并在您设置的位置使用 session 变量 负载计数

2. 如果您的页面是通过 Ajax 加载的并注入(inject)到 DOM ，然后，例如，如果您的代码在第一个“真实”的主页上 加载页面 loadCnt 然后在页面之间移动 你再次'加载'主页你实际上没有加载整个 JavaScript 脚本，只需将 HTML 重新注入(inject)文档，然后您可以添加一个使用 loadCnt 的监听器。

3. 使用 JavaScript localStorage - 在第一次加载时，您将设置 在本地存储对象上计数器为 0，您将能够 在以后的加载中检索:

   if (localStorage.getItem("counter") === null) {
       // Check if the item exists; if not set it to 0 as it is the first run
       localStorage.setItem('counter', 0);
   }
   else {
       // Get the counter - here you can do your work for when the page is loaded after the first load
       localStorage.getItem('counter');
   }
   

4. 使用 Javascript cookie 执行与之前逻辑相同的操作，但在 cookie 中(因为 localStorage 可能存在兼容性问题)