从其他 js 文件调用 iframe 链接不起作用

Question

I created an iframe in vex6.html and a js file in styles.gq/test.js and in that file there is the link and id but when I try to call the code in html it does not work.我在 vex6.html 中创建了一个 iframe，在 styles.gq/test.js 中创建了一个 js 文件，该文件中有链接和 ID，但是当我尝试调用 html 中的代码时，它不起作用。

Here is my code for vex6.html这是我的 vex6.html 代码

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<script type="text/javascript" src="https://styles.gq/test.js" ></script>

<iframe id="vex6" width="100%" height="500" style="border:1px solid black;"></iframe>


</body>
</html>

here is my js code这是我的js代码

document.getElementById("vex3").src
    = "https://www.obviousplays.tk/gfiles/vex3";

document.getElementById("vex4").src
    = "https://www.obviousplays.tk/gfiles/vex4";
    
document.getElementById("vex5").src
    = "https://www.obviousplays.tk/gfiles/vex5";
    
document.getElementById("vex6").src
    = "https://www.obviousplays.tk/Gfiles6/vex6";
    
document.getElementById("slope").src
    = "https://www.obviousplays.tk/gfiles/slope";

I expected an iframe but instead there seems to be no link for the iframe it is also spitting out the error cannot set properties of null (setting(src))我期待 iframe 但似乎没有 iframe 的链接它也吐出错误无法设置 null 的属性（设置（src））

Answer 1

Add the line <script type="text/javascript" src="https://styles.gq/test.js</script> after the iframe tag.在 iframe 标签后添加<script type="text/javascript" src="https://styles.gq/test.js</script>行。

Worked for me.为我工作。

Answer 2

Error in console: "script.js:3 Uncaught TypeError: Cannot set properties of null (setting 'src')"控制台错误： "script.js:3 Uncaught TypeError: Cannot set properties of null (setting 'src')"

Your script is loaded before the iframe content, meaning that you're trying to initialize the source of an unidentified object.您的脚本在 iframe 内容之前加载，这意味着您正在尝试初始化未识别的 object 的来源。

Solution : Place the <script> tag below your iframe. It is a good practice to place <script> tags at the bottom of the <body> tag so we can always access loaded content.解决方案：将<script>标签放在您的 iframe 下面。将<script>标签放在<body>标签的底部是一个很好的做法，这样我们就可以随时访问加载的内容。 However, sometimes it takes the contents a little bit more time until they fully load (despite placing the <script> tag at the bottom of the page) .然而，有时内容需要更多时间才能完全加载（尽管将<script>标记放在页面底部） 。 I'd suggest wrapping your code in window.onload = () {} It will ensure that all contents are loaded before firing the code.我建议将您的代码包装在window.onload = () {}中，这将确保在触发代码之前加载所有内容。

<body>

<iframe id="vex3" width="100%" height="500" style="border:1px solid black;"></iframe>

<script type="text/javascript" src="https://styles.gq/test.js"></script>

</body>

Your code is fine and should work (pardon for criticizing) .您的代码很好，应该可以工作（请原谅批评） 。 Anytime you seem to use repetitive code, it means that it can be simplified/automated like so:任何时候你似乎使用重复代码，这意味着它可以像这样被简化/自动化：

window.onload = () => {
  // Target all <iframe> tags.
  iframes = document.querySelectorAll('iframe');

  // Loop through list of <iframe> nodes.
  Array.from(iframes).map(iframe => {
    // Update <iframe>'s attribute "src" to the origin URL,
    // and use the iframe's attribute "id" value as the final source.
    iframe.setAttribute('src', `https://www.obviousplays.tk/gfiles/${iframe.id}`)
  });
}

从其他 js 文件调用 iframe 链接不起作用

问题描述

2 个解决方案

解决方案1
1 已采纳 2022-11-15 21:39:52

解决方案2
0 2022-11-15 21:58:00

从其他 js 文件调用 iframe 链接不起作用

问题描述

2 个解决方案

解决方案1 1 已采纳 2022-11-15 21:39:52

解决方案2 0 2022-11-15 21:58:00

解决方案1
1 已采纳 2022-11-15 21:39:52

解决方案2
0 2022-11-15 21:58:00