❤vue和React功能篇（非常规实践---别轻易使用）

❤vue和React功能篇（非常规实践—别轻易使用）

1、在Vue中更改iframe嵌入页面的样式

(1) 方式一 组件化思维对付iframe

1、嵌入页面路径
2、css文件名称（默认放在/static/css/下），默认css文件名可以自己定义，在确定嵌入页面不多，相互之间的css属性不会冲突的情况下，可以使用一个css文件

对嵌入页面的更改（子组件）

<template>
    <div class="wrapper-c">
        <div style="height: 100%" v-bkloading="{ isLoading: loading, opacity: 1, zIndex: 10 }">
            <iframe id="fram_box"
                @load="loadFrame"
                :src="url"
            >
            </iframe>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'common-iframe',
        props: {
            url: String,
            link: {
                type: String,
                default: 'frame_reset'
            }
        },
        data() {
            return {
                loading: true
            }
        },
        mounted() {
            const close = this.closeLoading
            $('#fram_box').load(() => {
                close()
            })
        },
        methods: {
            closeLoading() {
                this.loading = false
            },
            // loadFrame函数是iframe加载完成后回调函数
            loadFrame() {
                // 获取iframe节点
                const iframeBox = document.getElementById('fram_box')
                // 获取iframe html文件
                const doc = iframeBox.contentWindow.document
                // 获取iframe html文件head
                const head = doc.getElementsByTagName('head')
                // 新建link标签
                const linkTag = document.createElement('link')
                // 设置link标签id
                linkTag.id = 'newstyle'
                // link标签引入css文件的地址 ；window.STATIC_URL 是全局变量，指向静态资源目录，需要自己指定
                linkTag.href = `${window.STATIC_URL}css/${this.link}.css`
                // 设置link标签属性
                linkTag.setAttribute('rel', 'stylesheet')
                // 设置link标签属性
                linkTag.setAttribute('type', 'text/css')
                // 将link标签添加进iframe html文件的head里
                head[0].append(linkTag)
            }
        }
    }
</script>

<style lang="scss" scoped>
.wrapper-c {
    width: calc(100%);
    height: 100%;
    margin-left: 0;

    #fram_box {
        height: 100%;
        width: 100%;
        border-width: 0px;
    }
}
</style>

父组件

<template>
    <div id="wraper-p">
        <common-iframe :url="infoUrl" :link="'health_adviser'"></common-iframe>
    </div>
</template>

<script>
    import commonIframe from '../components/commonIframe'

    export default {
        name: 'overview',
        components: {
            commonIframe 
        },
        data() {
            return {
                infoUrl: '【页面路径】'
            }
        }
    }
</script>

<style lang="scss" scoped>
#wraper-p{
    width: 100%;
    height: calc(100vh - 92px);
    box-sizing: border-box;
    overflow: hidden;
}
</style>

(2) 方式二 （简单样式vue自更改）

1、获取 iframe 元素

<template>
  <div>
    <iframe ref="myIframe" src="https://example.com"></iframe>
  </div>
</template>

2、修改 iframe 内部样式

<script>
export default {
  mounted() {
    // 获取 iframe 元素
    const iframe = this.$refs.myIframe;

    // 确保 iframe 已加载完成
    iframe.onload = () => {
      // 获取 iframe 内部窗口对象
      const iframeWindow = iframe.contentWindow;

      // 在 iframe 内部执行 JavaScript 代码来修改样式
      iframeWindow.document.body.style.backgroundColor = 'lightblue';
    };
  }
}
</script>

(3) 方式三 （简单样式—利用原生的方式进行更改）

<template>
  <div>
    <iframe ref="myIframe" src="https://example.com"></iframe>
    <button @click="changeStyle">修改iframe样式</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    changeStyle() {
      const iframe = this.$refs.myIframe;
      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
      const styleElement = iframeDoc.createElement('style');
      styleElement.textContent = `
        body {
          background-color: #f0f0f0;
          color: #333;
        }
        /* 添加其他需要修改的样式 */
      `;
      iframeDoc.head.appendChild(styleElement);
    }
  }
}
</script>

2、video标签的动态路径使用方法及里面的坑（vue项目中）

需求：

在详情展示的时候播放.mp4文件,然后动态改变这个视频的路径无法生效

原因：

使用video标签的时候,会在里面嵌套一个source标签

<video controls="controls" width="960px" autoplay="autoplay">
        <source :src="url+videoUrl " type="video/.mp4" />
</video>

① 解决方法

url是固定的路径,videoUrl是动态的路径,这就导致我在切换数据详情页的时候,不会跟着详情的路径进行改变,分析是这个标签使用的问题

<video :src=" url + videoUrl " controls="controls" width="960px" autoplay="autoplay">
</video>

把里面的source标签去掉 里面的路径写在video上面,这样就可以动态改变video了

（未生效）

return {
      url: require("../assets/promotionalVideo.mp4")
};
更改地址：
this.$refs.video.src = ('你的视频地址')

3、将Stylus文件转换为SCSS文件和css文件

将lang=“stylus“转换为lang=“scss“的方法

打开cmd，全局安装一个插件：

npm install -g stylus-converter

新建一个文件（例：text.styl），用vscode打开，将要转换的代码复制到文件中
在对应的文件夹执行要转换的文件命令：

stylus-conver -i test.styl -o test.scss

将lang=“stylus“转换为lang=“css“的方法

确保你已经安装了Node.js和npm，然后全局安装Stylus
npm install -g stylus

安装好了以后开始转换代码
stylus style.styl -o style1.css

ok