Questions tagged «cross-browser»

跨浏览器开发是指构建网站，Web应用程序，库或组件，以使其在不同的Web浏览器和呈现引擎中起作用的实践。

8
如何在没有（减号）滚动条的情况下获取屏幕宽度？
我有一个元素，需要它的宽度没有垂直滚动条。 Firebug告诉我机身宽度为1280px。 这些方法在Firefox中都可以正常工作： console.log($('.element').outerWidth() ); console.log($('.element').outerWidth(true) ); $detour = $('.child-of-element').offsetParent(); console.log( $detour.innerWidth() ); 它们都返回1263px，这是我正在寻找的值。 但是所有其他浏览器都给我1280px。 有没有跨浏览器的方法来获得没有（！）垂直滚动条的全屏宽度？
5
显示数据列表标签，但提交实际值
当前<datalist>，大多数主流浏览器（Safari除外）都支持HTML5元素，这似乎是一种向输入添加建议的有趣方式。 但是，该value属性的实现与上的内部文本之间似乎存在一些差异<option>。例如： <input list="answers" name="answer"> <datalist id="answers"> <option value="42">The answer</option> </datalist> 不同的浏览器对此处理方式有所不同： Chrome和Opera： FireFox和IE 11： 选择一个后，输入将填充值而不是内部文本。我只希望用户在下拉列表和输入中看到文本（“答案”），但42像那样select将值传递给Submit。 如何使所有浏览器的下拉列表显示<option>s的标签（内部文本），但在value提交表单时发送属性？
11
获取DOM节点的字符串表示形式
Javascript：我有一个节点（元素或文档）的DOM表示形式，并且正在寻找它的字符串表示形式。例如， var el = document.createElement("p"); el.appendChild(document.createTextNode("Test")); 应该产生： get_string(el) == "<p>Test</p>"; 我有一种强烈的感觉，我错过了一些简单的事情，但是我只是找不到一种可以在IE，FF，Safari和Opera中使用的方法。因此，outerHTML是没有选择的。
8
跨域postMessage在IE10中是否损坏？
我正在尝试做一个简单的postMessage例子... 在IE10中 窗口/标签页之间（相对于iframe） 跨起源 删除这些条件之一，一切正常：-) 但是据我所知，postMessage仅当两个窗口共享一个原点时，窗口间才似乎在IE10中起作用。（事实上​​，而且很奇怪，这种行为比这更宽松：共享宿主的两个不同来源似乎也起作用）。 这是有记录的错误吗？有任何解决方法或其他建议吗？ （注意：此问题涉及问题，但答案是关于IE8和IE9的，而不是10） 更多详细信息和示例... 启动器页面演示 <!DOCTYPE html> <html> <script> window.addEventListener("message", function(e){ console.log("Received message: ", e); }, false); </script> <button onclick="window.open('http://jsbin.com/ameguj/1');"> Open new window </button> </html> 启动页面演示 <!DOCTYPE html> <html> <script> window.opener.postMessage("Ahoy!", "*"); </script> </html> 这可以在以下网址使用：http : //jsbin.com/ahuzir/1 －因为两个页面都位于相同的来源（jsbin.com）。但是将第二页移动到其他任何地方，在IE10中失败。
9
如何在浏览器中通过Javascript压缩图像？
TL; DR; 上传之前，有没有一种方法可以直接在浏览器端压缩图像（主要是jpeg，png和gif）？我很确定JavaScript可以做到这一点，但是我找不到实现它的方法。 这是我要实现的完整方案： 用户访问我的网站，然后通过input type="file"元素选择图片， 该图片是通过JavaScript检索的，我们进行了一些验证，例如正确的文件格式，最大文件大小等， 如果一切正常，则会在页面上显示图像的预览， 用户可以执行一些基本操作，例如将图像旋转90°/ -90°，按照预定义的比例进行裁剪等，或者用户可以上传其他图像并返回步骤1， 当用户满意时，然后将编辑后的图像压缩并本地“保存”（不保存到文件中，而是保存在浏览器的内存/页面中），- 用户使用姓名，年龄等数据填写表单， 用户单击“完成”按钮，然后将包含数据和压缩图像的表单发送到服务器（不使用AJAX）， 直到最后一步的完整过程都应该在客户端完成，并且应该与最新的Chrome和Firefox，Safari 5+和IE 8+兼容。如果可能的话，应该只使用JavaScript（但是我很确定这是不可能的）。 我现在还没有编写任何代码，但是我已经考虑过了。可以通过File API在本地读取文件，可以使用Canvas元素完成图像预览和编辑，但是我找不到找到图像压缩部分的方法。 根据html5please.com和caniuse.com的说法，要支持这些浏览器是非常困难的（由于IE），但是可以使用诸如FlashCanvas和FileReader的polyfill来实现。 实际上，目标是减小文件大小，因此我将图像压缩作为解决方案。但是，我知道上载的图像将每次都在同一位置显示在我的网站上，并且我知道该显示区域的尺寸（例如200x400）。因此，我可以调整图像大小以适合这些尺寸，从而减小文件大小。我不知道这种技术的压缩率是多少。 你怎么看 ？您有什么建议要告诉我吗？您知道在JavaScript中压缩图像浏览器端的任何方法吗？多谢您的回覆。
4
检测何时加载iframe内容（跨浏览器）
我正在尝试检测何时已加载iframe及其内容，但运气不佳。我的应用程序在父窗口的文本字段中进行了一些输入，并更新了iframe以提供“实时预览” 我从以下代码（YUI）开始，以检测何时发生iframe加载事件。 $E.on('preview-pane', 'load', function(){ previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0]; } “预览窗格”是我的iframe的ID，我正在使用YUI附加事件处理程序。但是，我认为尝试通过回调（在iframe加载时）访问主体失败，我认为是因为iframe在事件处理程序准备好之前就已加载。如果我通过使生成iframe的php脚本进入睡眠状态来延迟iframe的加载，则此代码有效。 基本上，我想问的是跨浏览器检测iframe何时加载及其文档准备就绪的正确方法是什么？
7
css跨浏览器的值是否为“ width：-moz-fit-content;”？
我需要一些div居中放置并同时适合其内容宽度。 我现在这样做： .mydiv-centerer{ text-align: center; .mydiv { background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7); border-radius: 10px 10px 10px 10px; box-shadow: 0 0 5px #0099FF; color: white; margin: 10px auto; padding: 10px; text-align: justify; width: -moz-fit-content; } } 现在，最后一个命令“ width：-moz-fit-content;” 是正是我所需要的！ 唯一的问题是..它仅在Firefox上有效。 我还尝试了“ display：inline-block;” ，但我需要这些div表现得像div一样。也就是说，每个下一个div应该位于上一个之下，而不是内联。 您知道任何可能的跨浏览器解决方案吗？
9
使用Modernizr来检测IE的正确方法？
我想使用Modernizr JS库检测某些浏览器属性，以确定要显示或不显示哪些内容。 我有一个名为Pano2VR的应用程序，它可以同时输出HTML5和SWF。我需要用于iOS设备用户的HTML5。 但是，IE根本不呈现此“ HTML5”输出。看来它们的输出使用CSS3 3D转换和WebGL，IE9中显然不支持一种或多种。 因此，对于那些用户，我需要显示Flash版本。我打算使用IFRAME，并通过Modernizr脚本或document传递SRC。根据浏览器写出正确的IFRAME代码。 所有这些导致我如何使用Modernizr来仅检测IE或不检测IE？还是检测CSS 3d转换？ 还是有其他方法可以做到这一点？
2
文本区域下的额外空间，随浏览器而异
在textarea标签下有一些额外的空间。在不同的浏览器中为1到4像素。标记非常简单： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> body { margin: 0; padding: 0; } .main { background-color: red; } textarea { background-color: gray; resize: none; margin: 0; border: 0 none; padding: 10px; height: 50px; overflow: hidden; } </style> </head> <body> <div class="main"> <textarea></textarea> </div> </body> …
3
如何使event.srcElement在Firefox中工作，这是什么意思？
我公司网站上有一个if陈述，使一个网页与firefox不兼容 if(event.srcElement.getAttribute("onclick") == null){ ...code.. document.mainForm.submit(); } 我已经注释掉了if语句的条件，现在它已与forefox一起使用。我的问题是，event.srcElement.getAttribute（“ onclick”）是什么，它很重要，将来会引起问题吗？此外，是否有类似的东西我可以用替换条件，以便它可以在Firefox上工作？ 编辑： function gotoRDManagerPT(PTId, bDDetailId) { if(!proceed()) return false; var target = event.target || event.srcElement; if(event.target.getAttribute("onclick") == null) { document.mainForm.displayRDManagerPT.value = "true"; document.mainForm.PTId.value = PTId; document.mainForm.bDDetailId.value = bDDetailId; document.mainForm.submit(); } }
7
未捕获的TypeError：Object.values不是JavaScript函数
我有一个简单的对象，如下所示： var countries = { "Argentina":1, "Canada":2, "Egypt":1, }; 我需要创建两个数组。第一个数组是对象中所有键的数组。我通过以下方式创建了此数组： var labels = Object.keys(countries); 这很好。我得到了一些国家。现在，当我尝试从值创建数组时... var labels = Object.values(countries); 我收到此错误： Uncaught TypeError: Object.values is not a function JavaScript 我不知道我在做什么错。我console.log countries在声明前后labels对象和对象保持不变。如何正确使用Object.values()？
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.