Question

如何忽略页面上iframe的浏览器缩放（ctrl + scroll）

我尝试：

尝试计算比例使用window.devicePixelRatio并更改iframe缩放 document.body.style.transform = 'scale(' + 1 / window.devicePixelRatio + ')';

Answer 1

好的，经过一番尝试后，我发现了一个解决问题的黑客解决方案。它使用tombigel（link）的DetectZoom库。一切都在主文档中完成（例如index.html）

首先，您必须在文档中添加以下CSS行

<style>
        #frame {
            -moz-transform: scale(1.0);
            -moz-transform-origin: 0 0;
            -o-transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
        }
</style>

然后，在您的frame中添加一个ID（我的情况为iframe），如下所示：

<iframe id="frame" src="...">
</iframe>

并且，在文档的末尾添加一些javascript：

首先，我们需要jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

然后，实际的DetectZoom库（我已将其下载并将其放在一行代码中以使事情更容易，但您当然可以将其放在单独的js文件中）。

<script>
    (function(root,ns,factory){"use strict";"undefined"!=typeof module&&module.exports?module.exports=factory(ns,root):"function"==typeof define&&define.amd?define(function(){return factory(ns,root)}):root[ns]=factory(ns,root)})(window,"detectZoom",function(){var devicePixelRatio=function(){return window.devicePixelRatio||1},fallback=function(){return{zoom:1,devicePxPerCssPx:1}},ie8=function(){var zoom=Math.round(100*(screen.deviceXDPI/screen.logicalXDPI))/100;return{zoom:zoom,devicePxPerCssPx:zoom*devicePixelRatio()}},ie10=function(){var zoom=Math.round(100*(document.documentElement.offsetHeight/window.innerHeight))/100;return{zoom:zoom,devicePxPerCssPx:zoom*devicePixelRatio()}},webkitMobile=function(){var deviceWidth=90==Math.abs(window.orientation)?screen.height:screen.width,zoom=deviceWidth/window.innerWidth;return{zoom:zoom,devicePxPerCssPx:zoom*devicePixelRatio()}},webkit=function(){var important=function(str){return str.replace(/;/g," !important;")},div=document.createElement("div");div.innerHTML="1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0",div.setAttribute("style",important("font: 100px/1em sans-serif; -webkit-text-size-adjust: none; text-size-adjust: none; height: auto; width: 1em; padding: 0; overflow: visible;"));var container=document.createElement("div");container.setAttribute("style",important("width:0; height:0; overflow:hidden; visibility:hidden; position: absolute;")),container.appendChild(div),document.body.appendChild(container);var zoom=1e3/div.clientHeight;return zoom=Math.round(100*zoom)/100,document.body.removeChild(container),{zoom:zoom,devicePxPerCssPx:zoom*devicePixelRatio()}},firefox4=function(){var zoom=mediaQueryBinarySearch("min--moz-device-pixel-ratio","",0,10,20,1e-4);return zoom=Math.round(100*zoom)/100,{zoom:zoom,devicePxPerCssPx:zoom}},firefox18=function(){return{zoom:firefox4().zoom,devicePxPerCssPx:devicePixelRatio()}},opera11=function(){var zoom=window.top.outerWidth/window.top.innerWidth;return zoom=Math.round(100*zoom)/100,{zoom:zoom,devicePxPerCssPx:zoom*devicePixelRatio()}},mediaQueryBinarySearch=function(property,unit,a,b,maxIter,epsilon){function binarySearch(a,b,maxIter){var mid=(a+b)/2;if(0>=maxIter||epsilon>b-a)return mid;var query="("+property+":"+mid+unit+")";return matchMedia(query).matches?binarySearch(mid,b,maxIter-1):binarySearch(a,mid,maxIter-1)}var matchMedia,head,style,div;window.matchMedia?matchMedia=window.matchMedia:(head=document.getElementsByTagName("head")[0],style=document.createElement("style"),head.appendChild(style),div=document.createElement("div"),div.className="mediaQueryBinarySearch",div.style.display="none",document.body.appendChild(div),matchMedia=function(query){style.sheet.insertRule("@media "+query+"{.mediaQueryBinarySearch "+"{text-decoration: underline} }",0);var matched="underline"==getComputedStyle(div,null).textDecoration;return style.sheet.deleteRule(0),{matches:matched}});var ratio=binarySearch(a,b,maxIter);return div&&(head.removeChild(style),document.body.removeChild(div)),ratio},detectFunction=function(){var func=fallback;return isNaN(screen.logicalXDPI)||isNaN(screen.systemXDPI)?window.navigator.msMaxTouchPoints?func=ie10:"orientation"in window&&"string"==typeof document.body.style.webkitMarquee?func=webkitMobile:"string"==typeof document.body.style.webkitMarquee?func=webkit:navigator.userAgent.indexOf("Opera")>=0?func=opera11:window.devicePixelRatio?func=firefox18:firefox4().zoom>.001&&(func=firefox4):func=ie8,func}();return{zoom:function(){return detectFunction().zoom},device:function(){return detectFunction().devicePxPerCssPx}}});
</script>

最后，让我们添加iframe的功能以保持大小。

<script>
    function refresh() {
        var zoomLevel = 1 / (window.detectZoom.device().toFixed(2));
        $('#frame').css({ transform: 'scale(' + zoomLevel +')' });
    }
    $(document).ready(function () {
        refresh();
        $(window).on('resize', refresh);
    });
</script>

你可以在这里看到一个工作示例：click（这将重定向到具有如上所述类似内容的HTML文档。这个HTML文档托管在我自己的服务器上，因为我无法在JSFiddle上使用IFrame，但我那里没有病毒。承诺;）！）

请注意，我还没有编写过DetectZoom库，但只编写了缩放iFrame的最后一个javscript代码段。

所有内容都已通过Google Chrome 61测试过，我不知道该内容与其他更老的浏览器有什么关系。

Answer 2

我使用下一个代码：

$csv_file_data = $this->csvimport->get_array($_FILES['csv']['tmp_name']);
foreach ($csv_file_data as $csv_data) {
     $required = array(
                'name' => $csv_data['name'],
                'price' => $csv_data['price']
     );
     foreach ($required as $key => $value) {
                $this->db->set($key, $value);
     }
     $categories= array();
     foreach ($csv_data as $key => $value) {
                if(strstr($key, 'categories')) {
                    $category = explode('|', $value);
                    for($i = 0; $i < sizeof($category); $i++) {
                        array_push($categories, $category[$i]);
                    }
                }
     }
     $this->db->insert('first_table');
     $id = $this->db->insert_id();

     foreach ($categories as $metatag) {
                    $this->db->set('productid', $id);
                    $this->db->set('category', $metatag);
                    $this->db->insert('second_table');
     }
}

它对我有用。请看这个问题：how did not zoom content on printing when browser zoom?

如何忽略页面上iframe的浏览器缩放（ctrl + scroll）

2 个答案: