JavaScript 如何在iframe中导航URL

要使用JavaScript在iframe中导航URL，在iframe元素中设置src属性或返回src属性的值。src属性定义了可以在iframe中显示的文档的URL。

语法：

document.getElementById("selector").src = "URL";

URL的取值： URL的可能取值有：

绝对URL： 它指向另一个网站（例如：https://www.geeksforgeeks.org/c-plus-plus/）。
相对URL： 它指向网站中的文件（例如：/gfg.php）。

返回值： 它返回嵌入在iframe中的文档的完整URL。

示例1

下面是一个使用绝对URL的代码示例。

<!DOCTYPE html> 
<html> 
  
<body style="text-align:center;"> 
    <iframe id="gfgFrame" src="" 
        style="height: 50vh; width: 600px;"> 
    </iframe> 
  
    <p>Click to visit GeeksForGeeks website</p> 
  
    <button onclick="navigate()"> 
        Click it 
    </button> 
  
    <script> 
        function navigate() { 
            document.getElementById("gfgFrame").src 
                = "https://www.geeksforgeeks.org/"; 
        } 
    </script> 
</body> 
  
</html>

输出结果：

JavaScript 如何在iframe中导航URL

示例2

下面是示例代码，演示了相对URL。

<!DOCTYPE html> 
<html> 
  
<body style="text-align:center;"> 
    <iframe id="gfgFrame" src="" 
        style="height: 50vh; width: 600px;"> 
    </iframe> 
    <br> 
  
    <button onclick="navigate()"> 
        Click it 
    </button> 
  
    <script> 
        function navigate() { 
            document.getElementById 
                ("gfgFrame").src = "home.html"; 
        } 
    </script> 
</body> 
  
</html>

输出:

JavaScript 如何在iframe中导航URL