如何使iframe内容具有响应性

编程问答 2022-10-26

问题描述

我正在尝试使应用程序中的页面响应。

iframe内容不适合flex组件，而是被剪切了。 尝试使用以下方法。

方法1

Making an iframe responsive

但是这种方法假设单个父组件下有一个iframe，并且所有iframe都堆叠在同一位置

这是我到目前为止一直在尝试的方法1

方法2 我尝试的第二件事是缩小iframe。 这种方法可以适当地缩小iframe的尺寸，但会在下面留出空间（由于可弯曲的高度）。

  .preview-card{
    transform: scale(0.6,0.6) !important;
    transform-origin: 25% 0% !important;
  }

这是我到目前为止一直在尝试的方法2 

new Vue({
  el: '#app',data() {
    return {
      drawer: false,mode: false,iframes: [],pattern: '/src=([^\\"]+)/'
    };
  },methods: {
      showPreviews() {
            let response = [
        {
          body:
            '<iframe src="https://www.facebook.com/ads/api/preview_iframe.PHP?d=AQINR98fmsIvXhblliawS8Jph_lhrWpQfUro1wjwLn0LypJ5hIJcKjr5WIJs3N-U2Jmn2dyV1nJqvsoQK9vPCC6pWMXIdFzdtxlsTTks7GsMT3AHagZ_8NA9P-gfra_u1iFVAQAjUtaFr6-nZ01KwE_1LtZTi3vdknWSzVpi1DK3qC_ZtdhF1ncwCQLNgdZVTMhBB4sXMNEQ-xS4kcz5OOnr3Ihzs7Yl5EioGzih_XRBEtBpjHWszW39TTfYlS7QjxNl3ItgtNyi0gaqgVFVb9vgz1bNLle2dLreCamxotDNEZKLPRqdPQ7X8Grx1NSxKFMpvqsXjsaIwnp0sw2AzYG7On_IxPFr2jx4iFpO4lJpdNwA_RiL_dZZkCDrl91wrFHgV6o7x2maY7xpNvANPw3HtWZ1AqHUPa7BzGPBCVvmrup1ps-w066ub4L84Sfszt96PG2BjjvDkqIdhfjj2cskfHI2LoqK5dtHKBrhbJZx0PzFTBpP5ez3qeE9QVr9GG1My8rGcoGqAN_MRkpgLvZHcsW6moY4UjTRXAv1iF4v-8mv_n090SIvbiBuJ-wzsIwP4O9eZsoj5GBAL_ud7KnEieHBRVyN2X7ne6dBq90_I7qIw_H8ZitI-3e9VXnOexRTTEYVsCfZh74KWcfioTOuQAEnJyNnE28MicclCauYbNJJVdQhYPsEipayQJKWhgAJ0CGPTCHdfg05JVZpWo29wW2kxVT9jfF9GIUKpkrU9tZxMZsT5eK-Nhjk7l6RbOGjgj4K1oZgFH_nppE0wkhrAGgqohXoLsPObRWWlmCikU0EWHa2prz-uvo9_UgXcPOqshbth9Sx6aLdMC_hWrXuoO_drrJey8orF9Y6jDVkmJDXo0GXegkupZpFIodKZbj9ThG09Fx59J_2LJ9kc6UNKfWjmJLJORYTotr9daglQTHjsU9MDUnSSZdp40WMgsnDU3eFOtj5SONLDuR7PpDqg2v9n_9Ffz-Yry8aDRP9YpKKX29rNJJSIlb-SIx0EXAdLWUIeGO8ekT0XGWgrT6HP30pUBSf501nGYTb7sIpO-sB23yabyUVfGzkozl2fkk1hZsGkOFt8cwhYzXogg3NT3k6rvomrmlUgE9-Y7kOLl0Wc6HfjMUo6w7r8qzvzVLEkUXG6IQA01fUtBZil9Ilaea-VBR4D9Q1QOnxygSiEHTrC9EaRu7lUgvWldcZEJdTR1Ef_QxMJCbkZsHo5REoQQp09MI5uXcv-Z8NdwPRwX_vCG6sqER9_xNZ0awVZ8r5kNotAyCPzr-lsMcqUnZatcpfn9oz4htsJdn4wwHu566xP5wChD0rsdRaNytMJ09Pt8zUFoB8y9WqzL8bF3BRla2eozjfSD2EOXVmu-YHX-lgkZgp1Ppt4tBt5wVNMg6lGJ2KWHtkCTR9hsdxPWOpp20xPplKw367NUaZL-anhAijwbKQ69ymOHvWA8BPaMQJOIEQp7VppPFirTW3DapF4GfIFjhJGfKEgNoz5n_xPvuT4HN5XK6ND_sxdDeemhcTl1EtPbG5QRxI9Xs5Nn7J-rIjdKOYVBZQhWd3PQOOk_KNgltetY-8mEuvKPgNhZ2yZJVuUK5jA2uGyUiIeFGmDlLLJ1QIg2M0tOZIdMVE0y4Z8e7bykIDM1sedCp9hgwmd2lsQ3io_q5adwqvg1jTki3d32cO7Cpk3cmo0zAYJTTv1K2pyYPvnTJRMkDG3GdV247-MKfjEgFclIJ7BqYaALKzsjKbumkPzKlT5NYpIDhPqPcY03deWGU3XusM0wGMF19uuoP9W1pIaBsqG7kvSJq0i__axUa3-cqrzdXOj9SG1Pyx6HwUbedYanRohq9V1Nwhymz4guFgm0Hk4jg0yOpt3a-5NH0lId3VZMKp2bzcqaj35I35WRPKQeHnmwVvqs-CaRVRjfmi3KciRppSH8guQKK9ZrnOu84VbM3FW7bM2EOwFEsMrS6ZShR-GE2Lp5QZe_3ZV-_66DXV7Qbj&amp;t=AQJxtLreSDKkEAVK" width="540" height="690" scrolling="yes" style="border: none;"></iframe>'
        },{
          body:
            '<iframe src="https://www.facebook.com/ads/api/preview_iframe.PHP?d=AQINR98fmsIvXhblliawS8Jph_lhrWpQfUro1wjwLn0LypJ5hIJcKjr5WIJs3N-U2Jmn2dyV1nJqvsoQK9vPCC6pWMXIdFzdtxlsTTks7GsMT3AHagZ_8NA9P-gfra_u1iFVAQAjUtaFr6-nZ01KwE_1LtZTi3vdknWSzVpi1DK3qC_ZtdhF1ncwCQLNgdZVTMhBB4sXMNEQ-xS4kcz5OOnr3Ihzs7Yl5EioGzih_XRBEtBpjHWszW39TTfYlS7QjxNl3ItgtNyi0gaqgVFVb9vgz1bNLle2dLreCamxotDNEZKLPRqdPQ7X8Grx1NSxKFMpvqsXjsaIwnp0sw2AzYG7On_IxPFr2jx4iFpO4lJpdNwA_RiL_dZZkCDrl91wrFHgV6o7x2maY7xpNvANPw3HtWZ1AqHUPa7BzGPBCVvmrup1ps-w066ub4L84Sfszt96PG2BjjvDkqIdhfjj2cskfHI2LoqK5dtHKBrhbJZx0PzFTBpP5ez3qeE9QVr9GG1My8rGcoGqAN_MRkpgLvZHcsW6moY4UjTRXAv1iF4v-8mv_n090SIvbiBuJ-wzsIwP4O9eZsoj5GBAL_ud7KnEieHBRVyN2X7ne6dBq90_I7qIw_H8ZitI-3e9VXnOexRTTEYVsCfZh74KWcfioTOuQAEnJyNnE28MicclCauYbNJJVdQhYPsEipayQJKWhgAJ0CGPTCHdfg05JVZpWo29wW2kxVT9jfF9GIUKpkrU9tZxMZsT5eK-Nhjk7l6RbOGjgj4K1oZgFH_nppE0wkhrAGgqohXoLsPObRWWlmCikU0EWHa2prz-uvo9_UgXcPOqshbth9Sx6aLdMC_hWrXuoO_drrJey8orF9Y6jDVkmJDXo0GXegkupZpFIodKZbj9ThG09Fx59J_2LJ9kc6UNKfWjmJLJORYTotr9daglQTHjsU9MDUnSSZdp40WMgsnDU3eFOtj5SONLDuR7PpDqg2v9n_9Ffz-Yry8aDRP9YpKKX29rNJJSIlb-SIx0EXAdLWUIeGO8ekT0XGWgrT6HP30pUBSf501nGYTb7sIpO-sB23yabyUVfGzkozl2fkk1hZsGkOFt8cwhYzXogg3NT3k6rvomrmlUgE9-Y7kOLl0Wc6HfjMUo6w7r8qzvzVLEkUXG6IQA01fUtBZil9Ilaea-VBR4D9Q1QOnxygSiEHTrC9EaRu7lUgvWldcZEJdTR1Ef_QxMJCbkZsHo5REoQQp09MI5uXcv-Z8NdwPRwX_vCG6sqER9_xNZ0awVZ8r5kNotAyCPzr-lsMcqUnZatcpfn9oz4htsJdn4wwHu566xP5wChD0rsdRaNytMJ09Pt8zUFoB8y9WqzL8bF3BRla2eozjfSD2EOXVmu-YHX-lgkZgp1Ppt4tBt5wVNMg6lGJ2KWHtkCTR9hsdxPWOpp20xPplKw367NUaZL-anhAijwbKQ69ymOHvWA8BPaMQJOIEQp7VppPFirTW3DapF4GfIFjhJGfKEgNoz5n_xPvuT4HN5XK6ND_sxdDeemhcTl1EtPbG5QRxI9Xs5Nn7J-rIjdKOYVBZQhWd3PQOOk_KNgltetY-8mEuvKPgNhZ2yZJVuUK5jA2uGyUiIeFGmDlLLJ1QIg2M0tOZIdMVE0y4Z8e7bykIDM1sedCp9hgwmd2lsQ3io_q5adwqvg1jTki3d32cO7Cpk3cmo0zAYJTTv1K2pyYPvnTJRMkDG3GdV247-MKfjEgFclIJ7BqYaALKzsjKbumkPzKlT5NYpIDhPqPcY03deWGU3XusM0wGMF19uuoP9W1pIaBsqG7kvSJq0i__axUa3-cqrzdXOj9SG1Pyx6HwUbedYanRohq9V1Nwhymz4guFgm0Hk4jg0yOpt3a-5NH0lId3VZMKp2bzcqaj35I35WRPKQeHnmwVvqs-CaRVRjfmi3KciRppSH8guQKK9ZrnOu84VbM3FW7bM2EOwFEsMrS6ZShR-GE2Lp5QZe_3ZV-_66DXV7Qbj&amp;t=AQJxtLreSDKkEAVK" width="540" height="690" scrolling="yes" style="border: none;"></iframe>'
        },{
          body:
            '<iframe src="https://www.facebook.com/ads/api/preview_iframe.PHP?d=AQINR98fmsIvXhblliawS8Jph_lhrWpQfUro1wjwLn0LypJ5hIJcKjr5WIJs3N-U2Jmn2dyV1nJqvsoQK9vPCC6pWMXIdFzdtxlsTTks7GsMT3AHagZ_8NA9P-gfra_u1iFVAQAjUtaFr6-nZ01KwE_1LtZTi3vdknWSzVpi1DK3qC_ZtdhF1ncwCQLNgdZVTMhBB4sXMNEQ-xS4kcz5OOnr3Ihzs7Yl5EioGzih_XRBEtBpjHWszW39TTfYlS7QjxNl3ItgtNyi0gaqgVFVb9vgz1bNLle2dLreCamxotDNEZKLPRqdPQ7X8Grx1NSxKFMpvqsXjsaIwnp0sw2AzYG7On_IxPFr2jx4iFpO4lJpdNwA_RiL_dZZkCDrl91wrFHgV6o7x2maY7xpNvANPw3HtWZ1AqHUPa7BzGPBCVvmrup1ps-w066ub4L84Sfszt96PG2BjjvDkqIdhfjj2cskfHI2LoqK5dtHKBrhbJZx0PzFTBpP5ez3qeE9QVr9GG1My8rGcoGqAN_MRkpgLvZHcsW6moY4UjTRXAv1iF4v-8mv_n090SIvbiBuJ-wzsIwP4O9eZsoj5GBAL_ud7KnEieHBRVyN2X7ne6dBq90_I7qIw_H8ZitI-3e9VXnOexRTTEYVsCfZh74KWcfioTOuQAEnJyNnE28MicclCauYbNJJVdQhYPsEipayQJKWhgAJ0CGPTCHdfg05JVZpWo29wW2kxVT9jfF9GIUKpkrU9tZxMZsT5eK-Nhjk7l6RbOGjgj4K1oZgFH_nppE0wkhrAGgqohXoLsPObRWWlmCikU0EWHa2prz-uvo9_UgXcPOqshbth9Sx6aLdMC_hWrXuoO_drrJey8orF9Y6jDVkmJDXo0GXegkupZpFIodKZbj9ThG09Fx59J_2LJ9kc6UNKfWjmJLJORYTotr9daglQTHjsU9MDUnSSZdp40WMgsnDU3eFOtj5SONLDuR7PpDqg2v9n_9Ffz-Yry8aDRP9YpKKX29rNJJSIlb-SIx0EXAdLWUIeGO8ekT0XGWgrT6HP30pUBSf501nGYTb7sIpO-sB23yabyUVfGzkozl2fkk1hZsGkOFt8cwhYzXogg3NT3k6rvomrmlUgE9-Y7kOLl0Wc6HfjMUo6w7r8qzvzVLEkUXG6IQA01fUtBZil9Ilaea-VBR4D9Q1QOnxygSiEHTrC9EaRu7lUgvWldcZEJdTR1Ef_QxMJCbkZsHo5REoQQp09MI5uXcv-Z8NdwPRwX_vCG6sqER9_xNZ0awVZ8r5kNotAyCPzr-lsMcqUnZatcpfn9oz4htsJdn4wwHu566xP5wChD0rsdRaNytMJ09Pt8zUFoB8y9WqzL8bF3BRla2eozjfSD2EOXVmu-YHX-lgkZgp1Ppt4tBt5wVNMg6lGJ2KWHtkCTR9hsdxPWOpp20xPplKw367NUaZL-anhAijwbKQ69ymOHvWA8BPaMQJOIEQp7VppPFirTW3DapF4GfIFjhJGfKEgNoz5n_xPvuT4HN5XK6ND_sxdDeemhcTl1EtPbG5QRxI9Xs5Nn7J-rIjdKOYVBZQhWd3PQOOk_KNgltetY-8mEuvKPgNhZ2yZJVuUK5jA2uGyUiIeFGmDlLLJ1QIg2M0tOZIdMVE0y4Z8e7bykIDM1sedCp9hgwmd2lsQ3io_q5adwqvg1jTki3d32cO7Cpk3cmo0zAYJTTv1K2pyYPvnTJRMkDG3GdV247-MKfjEgFclIJ7BqYaALKzsjKbumkPzKlT5NYpIDhPqPcY03deWGU3XusM0wGMF19uuoP9W1pIaBsqG7kvSJq0i__axUa3-cqrzdXOj9SG1Pyx6HwUbedYanRohq9V1Nwhymz4guFgm0Hk4jg0yOpt3a-5NH0lId3VZMKp2bzcqaj35I35WRPKQeHnmwVvqs-CaRVRjfmi3KciRppSH8guQKK9ZrnOu84VbM3FW7bM2EOwFEsMrS6ZShR-GE2Lp5QZe_3ZV-_66DXV7Qbj&amp;t=AQJxtLreSDKkEAVK" width="540" height="690" scrolling="yes" style=""></iframe>'
        },{
          body:
            '<iframe src="https://www.facebook.com/ads/api/preview_iframe.PHP?d=AQINR98fmsIvXhblliawS8Jph_lhrWpQfUro1wjwLn0LypJ5hIJcKjr5WIJs3N-U2Jmn2dyV1nJqvsoQK9vPCC6pWMXIdFzdtxlsTTks7GsMT3AHagZ_8NA9P-gfra_u1iFVAQAjUtaFr6-nZ01KwE_1LtZTi3vdknWSzVpi1DK3qC_ZtdhF1ncwCQLNgdZVTMhBB4sXMNEQ-xS4kcz5OOnr3Ihzs7Yl5EioGzih_XRBEtBpjHWszW39TTfYlS7QjxNl3ItgtNyi0gaqgVFVb9vgz1bNLle2dLreCamxotDNEZKLPRqdPQ7X8Grx1NSxKFMpvqsXjsaIwnp0sw2AzYG7On_IxPFr2jx4iFpO4lJpdNwA_RiL_dZZkCDrl91wrFHgV6o7x2maY7xpNvANPw3HtWZ1AqHUPa7BzGPBCVvmrup1ps-w066ub4L84Sfszt96PG2BjjvDkqIdhfjj2cskfHI2LoqK5dtHKBrhbJZx0PzFTBpP5ez3qeE9QVr9GG1My8rGcoGqAN_MRkpgLvZHcsW6moY4UjTRXAv1iF4v-8mv_n090SIvbiBuJ-wzsIwP4O9eZsoj5GBAL_ud7KnEieHBRVyN2X7ne6dBq90_I7qIw_H8ZitI-3e9VXnOexRTTEYVsCfZh74KWcfioTOuQAEnJyNnE28MicclCauYbNJJVdQhYPsEipayQJKWhgAJ0CGPTCHdfg05JVZpWo29wW2kxVT9jfF9GIUKpkrU9tZxMZsT5eK-Nhjk7l6RbOGjgj4K1oZgFH_nppE0wkhrAGgqohXoLsPObRWWlmCikU0EWHa2prz-uvo9_UgXcPOqshbth9Sx6aLdMC_hWrXuoO_drrJey8orF9Y6jDVkmJDXo0GXegkupZpFIodKZbj9ThG09Fx59J_2LJ9kc6UNKfWjmJLJORYTotr9daglQTHjsU9MDUnSSZdp40WMgsnDU3eFOtj5SONLDuR7PpDqg2v9n_9Ffz-Yry8aDRP9YpKKX29rNJJSIlb-SIx0EXAdLWUIeGO8ekT0XGWgrT6HP30pUBSf501nGYTb7sIpO-sB23yabyUVfGzkozl2fkk1hZsGkOFt8cwhYzXogg3NT3k6rvomrmlUgE9-Y7kOLl0Wc6HfjMUo6w7r8qzvzVLEkUXG6IQA01fUtBZil9Ilaea-VBR4D9Q1QOnxygSiEHTrC9EaRu7lUgvWldcZEJdTR1Ef_QxMJCbkZsHo5REoQQp09MI5uXcv-Z8NdwPRwX_vCG6sqER9_xNZ0awVZ8r5kNotAyCPzr-lsMcqUnZatcpfn9oz4htsJdn4wwHu566xP5wChD0rsdRaNytMJ09Pt8zUFoB8y9WqzL8bF3BRla2eozjfSD2EOXVmu-YHX-lgkZgp1Ppt4tBt5wVNMg6lGJ2KWHtkCTR9hsdxPWOpp20xPplKw367NUaZL-anhAijwbKQ69ymOHvWA8BPaMQJOIEQp7VppPFirTW3DapF4GfIFjhJGfKEgNoz5n_xPvuT4HN5XK6ND_sxdDeemhcTl1EtPbG5QRxI9Xs5Nn7J-rIjdKOYVBZQhWd3PQOOk_KNgltetY-8mEuvKPgNhZ2yZJVuUK5jA2uGyUiIeFGmDlLLJ1QIg2M0tOZIdMVE0y4Z8e7bykIDM1sedCp9hgwmd2lsQ3io_q5adwqvg1jTki3d32cO7Cpk3cmo0zAYJTTv1K2pyYPvnTJRMkDG3GdV247-MKfjEgFclIJ7BqYaALKzsjKbumkPzKlT5NYpIDhPqPcY03deWGU3XusM0wGMF19uuoP9W1pIaBsqG7kvSJq0i__axUa3-cqrzdXOj9SG1Pyx6HwUbedYanRohq9V1Nwhymz4guFgm0Hk4jg0yOpt3a-5NH0lId3VZMKp2bzcqaj35I35WRPKQeHnmwVvqs-CaRVRjfmi3KciRppSH8guQKK9ZrnOu84VbM3FW7bM2EOwFEsMrS6ZShR-GE2Lp5QZe_3ZV-_66DXV7Qbj&amp;t=AQJxtLreSDKkEAVK" width="540" height="720" scrolling="yes" style=";"></iframe>'
        }
      ];

      let iframesResponse;
      this.previewData = [];
      iframesResponse = response.map(fOb => {

        return fOb.body;
      });
      this.iframes = iframesResponse;
      }
    }
  
})
#card-parent-2 {
  position: relative;
}
@media (max-width: 600px) {
  .preview-card {
    transform: scale(0.6,0.6) !important;
    transform-origin: 25% 0% !important;
  }
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div id="app">
  <v-app>
   <v-layout px-2 row wrap>
      <v-flex xs12 md12>
        <v-btn @click="showPreviews">Show Previews</v-btn>
      </v-flex>
      <v-flex
        md6
        v-for="(iframe,index) in iframes"
        :key="index"
        :class="{'pa-0':$vuetify.breakpoint.smAndDown}"
      >
        <v-card class="preview-card" :key="`${index}${$vuetify.breakpoint.width}`" v-html="iframe"/>
      </v-flex>
    </v-layout>
  </v-app>
</div>

不确定我要去哪里。 任何建议都会有帮助

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmliframejavascript