美文网首页
更改iframe内元素样式

更改iframe内元素样式

作者: 六寸星田 | 来源:发表于2017-06-14 12:06 被阅读3421次

    需要注意点:

    所有的操作必须确保在$('iframename').load(function(){})内进行;

    $('#iframe').load(function({

         所要进行的操作

    }))确保iframe装载完毕之后进行后续操作;不然你可能得到

    var x = document.getElementById('iframe').contentWindow.document.getElementById('container');

    console.log(x) 

    打印台结果为:// null

    var x = document.getElementById('iframe').contentWindow.document

    console.log(x)

    打印台结果为:

    并没有我们引入页面的内容,

    方法一:直接通过js或者jQ获取iframe DOM节点进行控制

    如果要使用jQeury获取frame内元素的话必须确保iframe所引入的页面内引入了jQuery框架;

    $('#iframe').load(function () {

        var x = document.getElementById('iframe').contentWindow.document.getElementById('container');

        x.style.width = "100%";

        x.style.height = "100%";

        console.log(x)//以iframe中找元素a为例

    });

    方法二:创建link标签,添加到iframe中

    $('#iframe').load(function () {

        var cssLink = document.createElement("link");

        cssLink.href = "style.css";

        cssLink.rel = "stylesheet";

        cssLink.type = "text/css";

        frames['iframe'].document.body.appendChild(cssLink);

    });

    相关文章

      网友评论

          本文标题:更改iframe内元素样式

          本文链接:https://www.haomeiwen.com/subject/hiysqxtx.html