如何挂钩浏览器窗口调整大小事件？
有一种jQuery方式可以监听resize事件,但我不想将它带入我的项目中,只需要这个要求.
在调整浏览器窗口大小时,如何让React重新渲染视图？
我有一些块,我想在页面上单独布局,但我也希望它们在浏览器窗口更改时更新.最终结果将是Ben Holland的 Pinterest布局,但使用React编写的不仅仅是jQuery.我还有一段路要走.
这是我的应用程序:
var MyApp = React.createClass({
//does the http get from the server
loadBlocksFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
mimeType: 'textPlain',
success: function(data) {
this.setState({data: data.events});
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentWillMount: function() {
this.loadBlocksFromServer();
},
render: function() {
return (
<div>
<Blocks data={this.state.data}/>
</div>
);
}
});
React.renderComponent(
<MyApp url="url_here"/>,
document.getElementById('view')
)
然后我有了Block组件(相当于Pin上面Pinterest示例中的一个):
var Block = React.createClass({
render: function() {
return ( …我正在用d3.js画一个散点图.借助此问题:
获取屏幕大小,当前网页和浏览器窗口
我正在使用这个答案:
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
所以我能够将我的情节适合用户的窗口,如下所示:
var svg = d3.select("body").append("svg")
.attr("width", x)
.attr("height", y)
.append("g");
现在我想在用户调整窗口大小时,需要注意调整绘图的大小.
PS:我的代码中没有使用jQuery.
想象一下AngularJS中你想要创建一个需要响应全局事件的指令的情况.在这种情况下,假设窗口调整大小事件.
对此最好的方法是什么？我看到它的方式,我们有两个选择:1.让每个指令绑定到事件并在当前元素上做它的魔术2.创建一个全局事件监听器,它执行DOM选择器以获取逻辑应该在其上的每个元素应用.
选项1的优点是您已经可以访问要执行某些操作的元素.但是......选项2的优点是您不必在同一事件上多次绑定(对于每个指令),这可能是性能优势.
我们来说明两个选项:
选项1:
angular.module('app').directive('myDirective', function(){
function doSomethingFancy(el){
// In here we have our operations on the element
}
return {
link: function(scope, element){
// Bind to the window resize event for each directive instance.
angular.element(window).on('resize', function(){
doSomethingFancy(element);
});
}
};
});
选项2:
angular.module('app').directive('myDirective', function(){
function doSomethingFancy(){
var elements = document.querySelectorAll('[my-directive]');
angular.forEach(elements, function(el){
// In here we have our operations on the element
});
}
return {
link: function(scope, element){
// Maybe we have to do something in here, …最近我重新安装了我的电脑.完成后重新安装我注意到使用Inspect时,屏幕高度和页面宽度不再显示在右上角.
他们删除了它还是有秘密设置我还没找到？或者也许是一个bug？当我不得不使网站响应时,这使我的生活变得如此简单.
我需要准确测量我的Web应用程序中文本的维度,我通过创建一个元素(具有相关的CSS类)来实现,innerHTML然后设置它然后使用它将其添加到容器中appendChild.
执行此操作后,在元素呈现之前有一个等待,offsetWidth可以读取它以找出文本的宽度.
目前,我正在setTimeout(processText, 100)等待渲染完成.
是否有我可以收听的回调,或者更可靠的方式告诉我创建的元素何时被渲染？
比方说我有一个名为example.com的网站,iframe嵌入了iframe.net域,现在我想读取iframe的内容并传递一些参数来显示文本消息.喜欢你用户名.
现在问题是这个无法在两者之间建立连接,甚至无法获得我使用的iframe的innerHTML
document.getElementById('myframe').contentWindow.document.body.innerHTML;
它抛出错误"权限被拒绝访问属性"
有谁知道如何在跨域平台上读写
如何使此功能在滚动后添加类100vh？
目前它增加了课程850px.
$("document").ready(function($){
var nav = $('#verschwinden');
$(window).scroll(function () {
if ($(this).scrollTop() > 850) {
nav.addClass("doch");
} else {
nav.removeClass("doch");
}
});
});
无法让这个脚本在iphone上正常运行6.不断上升为"不可移动".我错过了什么？
$(document).ready(function(){
if ($(window).width < 700){
alert("mobile");
}
else {
alert("not mobile");
}
});
编辑:道歉,我在这里输入的代码有一个错字,但不是我的问题的原因.我对iphone分辨率有不准确的信息.感谢大家!
是否可以设置一个项目,其中包含React Native(移动应用程序)+ React(Web)的代码,除了UI部分之外,平台之间的代码都是粉碎的.
使用此种子与Angular + NativeScript做了类似的事情,这使得本机应用程序和Web应用程序之间的代码共享成为可能(除了UI层).寻找类似于React + React Native的东西.
如果您知道React Native + Angular的任何此类种子,请分享(如果有).