Question

我已经写了一个书签（在Stackexchange的专家的帮助下），我遇到了一个小问题，我无法关闭它。

这里是代码（敏感的人应该继续前进）：

javascript: (function () {



var htmlheader = "<html><head></head>"

var html = htmlheader + "<body><a href='javascript:document.getElementById(\"TroubleiFrame\").style.visibility = \"hidden\"'>Close</a>" + 
                "</body></html>";

var iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
iframe.style.background = "#fff";
iframe.style.width = "50%";
iframe.style.height = "500px";
iframe.style.left = "25%";
iframe.style.top = "25vh";
iframe.style.position = "fixed";
iframe.style.zIndex = "9999";
iframe.id = "TroubleiFrame";
iframe.style.boxShadow = "0 0 0 100vw rgba(0,0,0,0.75)";
document.body.appendChild(iframe);

})();

点击关闭链接时出现此错误：

未捕获的TypeError：无法读取属性＆＃39; style＆＃39;为null

如果我将命令粘贴到Chromes控制台中，则可以正常工作：

document.getElementById（＆＃34; TroubleiFrame＆＃34;）。style.visibility =＆＃34; hidden＆＃34;

你对我做错了什么有什么想法吗？如果可能的话，我也会喜欢简短的解释，所以我可以从中学到一些东西。

/帕特里克

Answer 1

您的parent.document.getElementById("TroubleiFrame");不知道名为“TroubleiFrame”的元素，因为它位于子窗口中。

您需要调用父母，然后从那里关闭它

{{1}}

查看this question，了解如何正确关闭iFrame。现在你只是隐藏它

Answer 2

我也遇到过这个问题，就像Pinterest的Pin It一样创建了一个书签。

它应该跨域工作。

我能解决这个问题的唯一方法是在ifit上的页面和GitHub上的这个例子之后的父页面之间发布事件：

https://gist.github.com/kn0ll/1020251

我已在另一个帖子上发布了答案： https://stackoverflow.com/a/43030280/3958617

还在另一个帖子上找到了另一个例子： https://stackoverflow.com/a/21882581/3958617

希望它有所帮助！

在bookmarklet中创建和关闭iframe

2 个答案: