javascript - 来自 IFrame Javascript 的链接的 URL

Question

这个问题以前可能见过。但在我的场景中我没有获得成功。我在 Iframe 中加载了本地 HTML 文件，并带有示异常(exception)部链接。

        <a href="http://www.boutell.com/">sample.com</a>

代码:

    <iframe id="iframe_Id" src="sample.html" 
style="background-color:white; height:100%; width:100%;" onload="Load()"; ></iframe>

    function Load() {
alert("loaded");
    var linkchange = document.getElementById("iframe_Id").contentWindow.location;
alert(linkchange);
}

点击外部链接时，我需要特定 anchor 标记的 url 值。

编辑:我知道由于安全策略的原因，当 URL 是不同的域时，我们无法获取 URL。但我需要本地 HTML 页面中的值(我点击的链接 URL)。我没有尝试过这种情况

对此需要任何帮助。

Answer 1

当您单击框架中的链接时，可以调用父窗口中的函数。

在父 html 中，您需要添加一个函数来处理调用。类似的东西

function iframeLinkClicked(url) {
     //do stuff
}

然后在子窗口中添加一个函数来处理超链接的点击事件。

function linkClicked(hyperLink) {
    parent.iframeLinkClicked(hyperLink.href);
}

您需要将其添加到所有超链接

<a href="http://www.google.com" onclick="linkClicked(this);">google</a>

现在，当您单击链接时，它会提醒父窗口。

编辑:向每个超链接添加“onclick”的替代方法。

如果框架 html 位于同一域中，则可以在加载框架时将事件添加到框架元素。

这是父页面中的完整脚本。

<script type="text/javascript">

    function iframeLinkClicked(url) {
        alert(url);
    }
    function Load(iframe) {
        iframe.onload = null;
        try {
            var a = document.frames['iframe_Id'].document.getElementsByTagName('a');
            for (var i = 0; i < a.length; i++) {
                a[i].onclick = function () {
                    parent.iframeLinkClicked(this.href);
                    return false;
                };
            }
        } catch (e) {

        }

    }
</script>

这将替换您当前的Load()函数。所以iframe仍然需要设置load属性。

不再需要向子页面添加任何内容。一切都在这里完成。

<iframe id="iframe_Id" src="sample.html" 
style="background-color:white; height:100%; width:100%;" onload="Load(this);" ></iframe>