通过JavaScript设置iframe的用户代理 [英] setting useragent of iframe via javascript
问题描述
业务要求努力满足：在iframe中加载的现有页面，模仿iPhone手机的用户代理。这需要做的客户端的原因，是有客户端脚本，其检测用户代理，并附加了一些班到html元素。基于该网站的样式将从根本上改变为基于所述HTML类CSS的目标元素。
因此，将采取并把它变成或者说我想在这里解决等情况
使用window.open作品Chrome浏览器中（如本code所示）。该网站会用适当的移动造型。
使用iframe的作品，但只有在FF。
在理想情况下，我想有iframe的版本在Chrome和FF工作。
有什么想法？
＆LT;脚本类型=文/ JavaScript的＆GT;
航海家.__ defineGetter __（'的userAgent'，函数（）{
回报的Mozilla / 5.0（iPhone; U; CPU的iPhone OS 4_3_2，例如Mac OS X; EN-US）为AppleWebKit / 533.17.9（KHTML，例如Gecko）版本/ 5.0.2移动/ 8H7的Safari / 6533.18.5;
}）; VAR赢= window.open（'/家庭/获取'）;
win.navigator .__ defineGetter __（'的userAgent'，函数（）{
回报的Mozilla / 5.0（iPhone; U; CPU的iPhone OS 4_3_2，例如Mac OS X; EN-US）为AppleWebKit / 533.17.9（KHTML，例如Gecko）版本/ 5.0.2移动/ 8H7的Safari / 6533.18.5;
}）;
win.location.href ='/家庭/获取'; //需要
$（函数（）{
VAR框架= $（'＆LT; IFRAME WIDTH =320HEIGHT =480＆GT;＆LT; / IFRAME＆GT;'）;
frame.hide（）;
$（'＃集装箱'）追加（帧）。
（帧[0] || .contentWindow框架[0] .contentDocument）.navigator .__ defineGetter __（'的userAgent'，函数（）{
回报的Mozilla / 5.0（iPhone; U; CPU的iPhone OS 4_3_2，例如Mac OS X; EN-US）为AppleWebKit / 533.17.9（KHTML，例如Gecko）版本/ 5.0.2移动/ 8H7的Safari / 6533.18.5;
}）;
frame.attr（'src'中，'/家庭/获取'）; }）;
frame.fadeIn（）;
}）;
＆LT; / SCRIPT＆GT;
想通了，适用于FF，Chrome和IE浏览器。因为我没有安装它，我不知道有关的Safari。它的简介是使Ajax请求，获取的HTML，然后打开内部框架文件。 在你打开它，那么你重写它的userAgent吸气，然后写你的Ajax调用收到的HTML。
$（函数（）{
VAR框架= $（'＆LT; IFRAME WIDTH =320HEIGHT =480＆GT;＆LT; / IFRAME＆GT;'）;
frame.hide（）; $（'＃集装箱'）追加（帧）。
VAR contentWindow =帧[0] || .contentWindow框架[0] .contentDocument; VAR setUA =功能（）{
如果（Object.defineProperty）{
Object.defineProperty（contentWindow.navigator的userAgent'，{
配置：真实，
得到：函数（）{
回报的Mozilla / 5.0（iPhone; U; CPU的iPhone OS 4_3_2，例如Mac OS X; EN-US）为AppleWebKit / 533.17.9（KHTML，例如Gecko）版本/ 5.0.2移动/ 8H7的Safari / 6533.18.5;
}
}）;
}否则如果（的Object.prototype .__ defineGetter__）{
contentWindow.navigator .__ defineGetter __（'的userAgent'，函数（）{
回报的Mozilla / 5.0（iPhone; U; CPU的iPhone OS 4_3_2，例如Mac OS X; EN-US）为AppleWebKit / 533.17.9（KHTML，例如Gecko）版本/ 5.0.2移动/ 8H7的Safari / 6533.18.5;
}）;
}其他{
警报（'浏览器不支持'）;
}
}; $阿贾克斯（{
缓存：假的，
网址：'/家庭/获取'，
成功：功能（HTML）{
contentWindow.document.open（）;
setUA（）;
contentWindow.document.write（HTML）;
contentWindow.document.close（）;
frame.fadeIn（）;
}
}）;
}）;
Business requirement trying to be met: Loading an existing page within an iframe, emulating an iphones user agent. The reason this needs to happen client side, is that there are client side scripts which detect the user agent and appends some classes onto the html element. Based on this the style of the site will radically change as the CSS targets elements based on the html classes.
So it would take and turn it into or in the case that I'm trying to resolve here etc.
Using window.open works (as demonstrated in this code) within chrome. The site renders with the proper mobile styling.
Using the iframe works, but only in FF.
Ideally, I'd like to have the iframe version working within Chrome and FF.
Any thoughts?
<script type="text/javascript">
navigator.__defineGetter__('userAgent', function () {
return 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5';
});
var win = window.open('/home/get');
win.navigator.__defineGetter__('userAgent', function () {
return 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5';
});
win.location.href = '/home/get'; //required
$(function () {
var frame = $('<iframe width="320" height="480"></iframe>');
frame.hide();
$('#container').append(frame);
(frame[0].contentWindow || frame[0].contentDocument).navigator.__defineGetter__('userAgent', function () {
return 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5';
});
frame.attr('src', '/home/get');
});
frame.fadeIn();
});
</script>
Figured it out, works for FF, Chrome and IE. I'm not sure about Safari as I don't have it installed. The synopsis of it is to make an ajax request, fetch the html and then open up the iframes document. AFTER you open it, then you override its userAgent getter and then write the html you received from the ajax call.
$(function () {
var frame = $('<iframe width="320" height="480"></iframe>');
frame.hide();
$('#container').append(frame);
var contentWindow = frame[0].contentWindow || frame[0].contentDocument;
var setUA = function() {
if (Object.defineProperty) {
Object.defineProperty(contentWindow.navigator, 'userAgent', {
configurable: true,
get: function () {
return 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5';
}
});
} else if (Object.prototype.__defineGetter__) {
contentWindow.navigator.__defineGetter__('userAgent', function () {
return 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5';
});
} else {
alert('browser not supported');
}
};
$.ajax({
cache: false,
url: '/home/get',
success: function (html) {
contentWindow.document.open();
setUA();
contentWindow.document.write(html);
contentWindow.document.close();
frame.fadeIn();
}
});
});
这篇关于通过JavaScript设置iframe的用户代理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
