在 iframe 内更改 css 属性答案

【问题标题】：change css property when WITHIN an iframe在 iframe 内更改 css 属性
【发布时间】：2017-11-04 05:47:21
【问题描述】：

A.html

<div class="X"></div>
<div class="Y"></div>

B.html

<iframe scrolling="no" src="A.html">

当用户访问A.html时，将 div Y 设置为display: none

当用户访问B.html时，将 div X 设置为display: none

【问题讨论】：

在a.html 添加<style>.Y{display:none;}</style> 并在b.html 添加<style>.X{display:none;}</style>
访问 iframe 的内容并不容易。这已经回答了很多方法。检查此页面以及链接：stackoverflow.com/questions/36512542/…

标签： javascript jquery css iframe

【解决方案1】：

只需在 A.html 中使用这个脚本，我希望你能得到你想要的结果！

<script type="text/javascript">
    $(document).ready(function () {
        var path = window.location.pathname;
        var ref = document.referrer;
       if (path == '/A.html' && ref!='')
        {
            $('[class="Y"]').css('display', 'none');
        }
        else {
            $('[class="X"]').css('display', 'none');
        }

    });
</script>

【讨论】：

抱歉，没用。你不能像那样简单地访问 iframe 的内容。
仍然无法在这里工作，但我推翻了我的反对意见。它适用于 OP。不知道这里发生了什么。

【解决方案2】：

有人发布了答案，它奏效了。但由于某种原因，原来的答案被删除了。

$(document).ready(function () {
        var path = window.location.href;
        if(path=='http://www.example.com/A.html')
        {
            $('[class="Y"]').css('display', 'none');
        }
        else {
            $('[class="X"]').css('display', 'none');
        }

    });

【讨论】：

是的，我已将其放入我的scripts.js 并加载到A.html
刚刚又试了一次。起初它有效，但返回第 1 页失败了。您是否尝试过在页面之间切换几次。希望我没有遗漏什么。
很奇怪，但它仍然在这里工作。测试了几次！

【解决方案3】：

您只需要在 iframe 中添加 name 属性前任。

然后使用 window.document.Ahtml.document 访问（iframe 有不同的文档对象）

【讨论】：